WorkAround Explorer issue

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}`;
}
2 Likes

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.

5 Likes

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 :laughing:

This is driving me mad!

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

2 Likes

having the same issue here :face_with_raised_eyebrow:

Hey everyone,

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.

2 Likes

Do this:

import { getDataByRole, getDataByCompany } from './salaryData.js';
import salaryData from './salaryData.js';

instead of

import { getDataByRole, getDataByCompany } from './modules/salaryData.js';
import salaryData from './modules/salaryData.js';

when importing to you workAroundModule.js file. :slight_smile:

5 Likes

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 :weary:

Alright! i managed to fix the problem,good luck. :kissing_heart:

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”.

Did you manage to solve it?

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.

thanks.

2 Likes

How did you fix the problem?
I cannot figure this out

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’;

import salaryData from ‘./salaryData.js’;

^ THIS! Thank You! For your Help!

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.

1 Like