WorkAround project disappears when I import from workAroundModule.js as per step 8

Did anyone have the same issue or can anyone help me get started trying to debug this, I’ve started the project twice over and I’m still stuck. It’s just that when I add the imports from the workAroundModule, I lose the output so no radio buttons etc.

Any ideas? Thanks!

Link to module:

https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-javascript-syntax-part-iii/modules/fscp-learn-javascript-syntax-modules/projects/es6-modules-workaround

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

Please post a link to this exercise page.

Thank you here it is

https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-javascript-syntax-part-iii/modules/fscp-learn-javascript-syntax-modules/projects/es6-modules-workaround

1 Like

Same thing happend to my screen. I lose the two divs containing the radio buttons as soon as I import from workaround module. Any held?

1 Like

Have been stuck on this also. have tried it I think already 3 times. But this happens all the time. Would like to know what we have been doing wrong.

I’m having the same problem…at first, I thought I was doing something wrong. But after having the same result 4 times in a row, I came here and found out I’m not the only one. Please, could anyone point out how to proceed?

Read the instructions for the next step.

If I am not wrong, that should give you an idea of what’s going on.

Yes, I have exactly the same problem. Can’t seem to resolve the issue.

@nicolahearn @juanfduque @kazz88 @megijamumgaude136497 @elnicomapero82885037 @mlancaster2607 and others. I just completed this project and experienced a similar issue as what you described. I created a post documenting my learnings and suggestions for others doing this new project. I think item #2 may be the same issue you are experiencing.

2 Likes

Great work, @ivan-avila !
Somehow I still can’t figure it out tho. I managed to fix step 7 somehow (must have typed something differently before).

but now the problem to me falls on updating the updateResult() function, where you need to change the value of the results from each const from 0 to the appropriate function.

As soon as I change them, assigning them their respective function, when I test it, the third column with the results never appears again.

Spent a good few hours on this one, might leave it for now and get back to it at another point.

Thanks a lot for your work tho. :clap:

I get how frustrating this can be. If you get back to it, feel free to share the code files where you are stuck and I am sure one of us here can help point out where the problem lies.

Can anyone figure out what I am doing wrong. As cannot render page even after looking at solutions suggested. Is it just a CC brower issue? what do you mean by console log each time? how show examlpe please.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WorkAround</title>
    <link rel="stylesheet" type="text/css" href="index.css" />
    <script type="module" src="main.js" defer></script>
  </head>
  <body>
    <main>
      <!-- The roles and companies <section>s are dynamically created in main.js with renderInputButtons() -->
      <section id="resultsContainer">
        <h3>Details:</h3>
        <p id="salarySelected"> ... </p>
        <p id="salaryAverageByRole"> ... </p>
        <p id="salaryAverageByCompany"> ... </p>
        <p id="salaryAverageIndustry"> ... </p>
      </section>
    </main>
  </body>
</html>
// TODO: Add your import statements here.
import { getCompanies, getRoles } 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}`;
}

// Add your imports here.
import { getDataByRole, getDataByCompany} from './salaryData.js';
import salaryData from './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(role, 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);
}


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

export { getAverageSalaryByRole, getAverageSalaryByComapany, getSalaryAtCompany, getIndustryAverageSalary};

const salaryData = [
  { role: 'CTO', company: 'Big Data Inc.', salary: 320000},
  { role: 'Technical Lead', company: 'Big Data Inc.', salary: 230000},
  { role: 'Software Engineer II', company: 'Big Data Inc.', salary: 180000},
  { role: 'Software Engineer I', company: 'Big Data Inc.', salary: 140000},
  { role: 'CTO', company: 'Medium Data Inc.', salary: 215000},
  { role: 'Technical Lead', company: 'Medium Data Inc.', salary: 165000},
  { role: 'Software Engineer II', company: 'Medium Data Inc.', salary: 140000},
  { role: 'Software Engineer I', company: 'Medium Data Inc.', salary: 115000},
  { role: 'CTO', company: 'Small Data Inc.', salary: 175000},
  { role: 'Technical Lead', company: 'Small Data Inc.', salary: 135000},
  { role: 'Software Engineer II', company: 'Small Data Inc.', salary: 115000},
  { role: 'Software Engineer I', company: 'Small Data Inc.', salary: 95000},
];

const getRoles = () => {
  return ['CTO', 'Technical Lead', 'Software Engineer II', 'Software Engineer I'];
}

const getCompanies = () => {
  return ['Big Data Inc.', 'Medium Data Inc.', 'Small Data Inc.'];
}

const getDataByRole = role => {
  return salaryData.filter(obj => obj.role === role);
}

const getDataByCompany = company => {
  return salaryData.filter(obj => obj.company === company);
}


export { getRoles, getCompanies, getDataByRole, getDataByCompany};

export default salaryData;

Let me walk you through how I was able to debug your problem. That way I think it helps you more how to do it in future occasions.
First I enabled the developer tools in the browser to see the console output and check if any errors were present. (Control+Shift+i in Chrome). Here I can see why execution is stopping and your page not loading. First issue was a typo when exporting getAverageSalaryByCompany as you see in the image.

I then fixed the typo in Company and reloaded. Page now loads ok. But after selecting my options I noticed the following error kept happening after choosing my options on the page:
It says the salary property is undefined. Which means the roleAtCompany object is likely not being found in the previous line.

So I added a couple console.log calls to print out the variables being received in this method. Here I noticed that companyData was not getting populated with any values from the call to getDataByCompany(role, company)

I then went to review the getDataByCompany inside salaryData.js. First thing I noticed is the function only takes one parameter (company) but you are passing two (role and company)

debug4

As soon as I fixed the call with just company. The data was being received correctly and website results populated as expected. :metal:

You were so close to being done! But here you see how the console makes a game of frustrating endless guessing what is wrong into a step by step debug activity. Hope this was helpful :beers:

1 Like

Oh wow, thank you @ivan-avila for taking the time to write that up. I seem to have got a bit further now that I’ve come back to it and I even wonder if part of the problem was that I hadn’t checked/selected the radio buttons :flushed:

BUT, I still can’t get it to work :confounded: As far as I can see I’ve written everything the same as you have. Opening the console is a great tip and these are the error messages I’m getting:

main.js:52 Uncaught TypeError: Cannot read property 'value' of null
    at HTMLInputElement.updateResults (main.js:52)
updateResults @ main.js:52
workAroundModule.js:23 Uncaught TypeError: Cannot read property 'salary' of undefined
    at getSalaryAtCompany (workAroundModule.js:23)
    at HTMLInputElement.updateResults (main.js:61)
getSalaryAtCompany @ workAroundModule.js:23
updateResults @ main.js:61

What should I do next, it is so annoying!

Wait! I just realised I only read one of your replies, the other one might help. I will take a look after the school run!

1 Like

@ivan-avila I have done it, thank you so much, you’re right, looking at the console is super helpful!! Huge sense of achievement here :raised_hands:

1 Like

Awesome to see! Good luck on the next steps.

thanks. not managed to get through all the steps yet.