Hi, I am having trouble with the WorkAround Explorer project. When I import the functions from WorkAroundModule.js into Main.js and run my code, the radial button sections disappear in the browser. If I comment out the WorkAround import then the radial buttons return. Does this have to do with having two imports in a single file? Am I supposed to combine them?
Help is much appreciated. Thank you.
// 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}`;
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 = 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}`;
}
I was able to solve the issue, which was an error in file path in WorkAroundModule.js. I was missing the ā.ā before ā./salaryData.jsā. I opened the console and found that the salaryData.js resource was not loading so start debugging from there.
Hmm, I am having the same issue but I have not forgotten the ā.ā I have no idea how to solve this, Iāve restarted it but the same thing is happening.
I seem to be having exactly the same problem. Having found looked at other solutions mine seems to be the same - I have used diffing tools to double check.
@adamlevoy I canāt see how ā./salaryData.jsā would help as that points to the wrong place - unless you meant the period was missing before ā/modules/salaryData.jsā, or Iām missing your point completely
Never mind @adamlevoy I see what you mean now - salaryData is in the same branch as workAroundModule so the pointer from inside workAroundModule should be ā./salaryDataā. Apologies for being dumb!
I do still have an issue thoughā¦ back to debugging
I am having the same issue. When I begin to import the file from āworkAroundModule.jsā all of my radio buttons disappear. Could anyone see an error in my āmain.jsā
// TODO: Add your import statements here.
import { getRoles, getCompanies, getDataByRole, getDataByCompany } 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}`;
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 = 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}`;
}
Iām having the same issue. The workAround.js file is the one giving me the problem, I take out the workAround.js import from the main.js file and everything shows perfectly.
Iām having the same issue, I followed all the steps , checked all the hints , reset the workplace and still not showing the radial button sections! Will try to debug it myself later i guess
not seeing at all how to fix this issue. It specifically occurs when Iām trying to import the workAroundModule. Iāve checked, double checked, and triple checked my spelling for mistakes and there are no typos. Further, Iāve done what the person above said about changing the path for the salaryData imports to the workAroundModule and that hasnāt fixed the issue of my radio buttons disappearing. HWAT IN TARNATION!?!??!
I think the path you use when importing is what causes the issue where the radio buttons disappear.
When importing from salaryData.js to workAround.js:
import { getDataByRole, getDataByCompany } from './salaryData.js';
import salaryData from './salaryData.js';
Since salaryData.js and workAround.js are in the same folder, you can not use ā./modules/salaryData.jsāā as you would from main.js that is in a parent folder. Instead, you must use ā./salaryData.jsā.
Iām having the same issue. My import code points to the right file but I canāt seem to get all three columns to appear. It is kind of frustrating. Any advice would be appreciated.
Not sure if this helps but I had the same issue as well. I messed up on step 5 and didināt import the default salary data correctly. This is what worked for me inside workAroundModule.js. The main.js script was not the issue.
// Add your imports here.
import {getDataByRole, getDataByCompany} from ā./salaryData.jsā;
Can someone post the solution? I have used up my 6 hours of of googling and troubleshooting. I was assuming there would be a video walkthrough from a friendly code academy staffer. Thanks!
main.js:54 Uncaught TypeError: Cannot read properties of null (reading āvalueā)
at HTMLInputElement.updateResults (main.js:54:74)
updateResults @ main.js:54
workAroundModule.js:22 Uncaught TypeError: Cannot read properties of undefined (reading āsalaryā)
at getSalaryAtCompany (workAroundModule.js:22:24)
at HTMLInputElement.updateResults (main.js:63:18)
getSalaryAtCompany @ workAroundModule.js:22
updateResults @ main.js:63
hi aflynt i hope youāll be great well in that case just make sure that you are passing the parameter into the calling function for example i think the code is the same so in the roleData variable make sure that the values is the function getDataByRole with its parameter (role).
so in that way:
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;
}
So that error is about catching the data so when the program try to read the function but not the parameter it get a null value.
i hope it helps for you.
