Workaround explorer module project rendering nothing

I’m doing the workaround explorer module project and it all seemed to work well until I had to import all the data from the workAroundModule.js. The moment I added the import statement the screen rendered nothing but one column with … beneath it on several lines. I am not sure what I am doing here. I think the problem is entirely related to the main.js in the project which I will paste below.

// 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 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};


Did I import them incorrectly? My first import worked just fine. I am stumped as to what is wrong here.

Actually its fine. I fixed the problem. I am not 100% sure what happened wrong, but I reset the project and did it again. It works correctly now.