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

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

1 Like

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.

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:

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