WorkAround Explorer

I having problem getting this piece of code to work.

I have added the import files to main.js.
import {getAverageSalaryByRole,getAverageSalaryByCompany,getSalaryAtCompany,getIndustryAverageSalary} from ‘./modules/workAroundModule.js’;
the file renders ok withoutl it with all the relevant boxes which is 3 of them without the import file, but once the above code is added it doesn’t work and only get 1 box rendered, it almost seems to be a conflict. the functions have already exported in a different file and the file path as far as i know is correct as it works on the other imports.

Am I missing something here.
Thanks

Can you share your code from main.js and workAroundModule.js? Also do you see in errors in the browser console?

How to format code in forum posts:

Hi Thanks
I don’t see any errors in the browser console. The 2 files are included below.

“”"// Main.js 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};
container.appendChild(header);

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);
divElement.appendChild(inputElement);

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

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

container.appendChild(divElement);

});

document.querySelector(‘main’).prepend(container);
}

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 = 0;
const averageSalaryByCompany = 0;
const salary = 0;
const industryAverageSalary = 0;

// 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};
}
“”"

“”" workAroundmodule.js
// Add your imports here.
import{getDataByRole,getDataByCompany} from ‘./modules/salaryData.js’;
import salaryData.js from ‘./modules/salaryData.js’;
// Replace the empty array with the appropriate imported function/value
const getAverageSalaryByRole = role => {
const roleData = getdataByRole(role);
const salariesOfRole = roleData.map(obj => obj.salary);
return calculateAverage(salariesOfRole);
}

// Replace the empty array with the appropriate imported function/value
const getAverageSalaryByCompany = company => {
const companyData = getDataByCompany(company);
const salariesAtCompany = companyData.map(obj => obj.salary);
return calculateAverage(salariesAtCompany);
}

// Replace the empty array with the appropriate imported function/value
const getSalaryAtCompany = (role, company) => {
const companyData = getDataByCompany(company);
const roleAtCompany = companyData.find(obj => obj.role === role);
return roleAtCompany.salary;
}

// Replace the empty array with the appropriate imported function/value
const getIndustryAverageSalary = () => {
const allSalaries = salaryData.map(obj => obj.salary);
return calculateAverage(allSalaries);
}
export{getAverageSalaryByRole,getAverageSalaryByCompany,getSalaryAtCompany,getIndustryAverageSalary};

// Helper Function. Do not edit.
// Note: This function does not need to be exported since it is only used by the functions contained within this module.
function calculateAverage(arrayOfNumbers) {
let total = 0;
arrayOfNumbers.forEach(number => total += number);
return (total / arrayOfNumbers.length).toFixed(2);
}
“”"

I have the same problem, Did you solved it?

Yes, I was importing extra modules. the only imports should be import{getRoles,getCompanies} from ‘./modules/salaryData.js’;