WorkAroundExplorer Project in Full-Stack Engineer Course

So I am working through the WorkAroundExplorer Project, and I found a weird bug. When I add my second import statement, the HTML elements for select a role and select a company completely disappear. The import statement is the only thing that is different when the elements disappear. I remembered to add type = “module” to my script element in HTML. I don’t see anything in the instructions indicating that this is normal behavior. Could anybody shine light on this?


I worked up all the way until the additional function(step 10), At that point, it implies you should have full functionality, but I’m still seeing the project displayed the way it is in my screenshot

I had

import { getAverageSalaryByRole, getAverageSalaryByCompany, getSalaryAtCompany, getIndustryAverageSalary } from "./modules/workAroundModule.js";  

for that import statement.

The location was "./modules/workAroundModule.js"

Thank you so much for taking the time!

I have no idea how I looked at it that many times and forgot to add a location, but thank you again!

Unfortunately, even with correct import statement, the bug is still occurring. I’m at a loss

Post your code (paste it between the ``` and ``` after using the </> button),
maybe someone will be able to help.

// TODO: Add your import statements here.
import {getRoles, getCompanies} from './modules/salaryData.js';
import {getAverageSalaryByRole, getAverageSalaryByCompany, getSalaryAtCompany, getIndustryAverageSalary} from './modules/workAroundModule.js';
// TODO: Get the companies and roles using the salaryData module.
const companies = getCompanies();
const roles = getRoles();

// Create input buttons for every company and role represented in the data.
renderInputButtons(companies, 'company');
renderInputButtons(roles, 'role');

// This function will create a new <section> with radio
// inputs based on the data provided in the labels array.
function renderInputButtons(labels, groupName) {
  const container = document.createElement('section');
  container.setAttribute('id', `${groupName}Inputs`);

  let header = document.createElement('h3');
  header.innerText = `Select a ${groupName}`;

  labels.forEach(label => { // For each label...
    // Create the radio input element.
    let divElement = document.createElement('div');
    divElement.setAttribute('class', 'option');

    let inputElement = document.createElement('input');
    inputElement.setAttribute('type', 'radio');
    inputElement.setAttribute('name', groupName);
    inputElement.setAttribute('value', label);

    // Create a label for that radio input element.
    let labelElement = document.createElement('label');
    labelElement.setAttribute('for', label);
    labelElement.innerText = label;

    // Update the results when the input is selected.
    inputElement.addEventListener('click', updateResults);



function updateResults(){
  // Get the current selected company and role from the radio button inputs.
  const company = document.querySelector("input[name='company']:checked").value;
  const role = document.querySelector("input[name='role']:checked").value;

  // If either the company or role is unselected, return.
  if (!company || !role) { return; }

  // TODO: Use the workAroundModule functions to calculate the needed data.
const averageSalaryByRole = getAverageSalaryByRole(role);
const averageSalaryByCompany = getAverageSalaryByCompany(company);
const salary = getSalaryAtCompany(role, company);
const industryAverageSalary = getIndustryAverageSalary();

  // Render them to the screen.
  document.getElementById('salarySelected').innerText = `The salary for ${role}s at ${company} is \$${salary}`;
  document.getElementById('salaryAverageByRole').innerText = `The industry average salary for ${role} positions is \$${averageSalaryByRole}`;
  document.getElementById('salaryAverageByCompany').innerText = `The average salary at ${company} is \$${averageSalaryByCompany}`;
  document.getElementById('salaryAverageIndustry').innerText = `The average salary in the Tech industry is \$${industryAverageSalary}`;

This is my main.js

I ran that code for main.js and it seems to work fine.
Maybe the problem is somewhere else.