WorkAround Explorer issue

Had the same issue and fixed it by adding the () after the getters:
// TODO: Get the companies and roles using the salaryData module.
const companies = getCompanies();
const roles = getRoles();

I need help. As soon as I do import for step 2 in main.js, it completely messes up. It fixes itself when I comment it out but I do anything else it still messes up.

I have tried everything on this thread and it’s still not working.

It was working until I got to step 9 and all of a sudden it doesn’t want to work anymore. I restarted and now won’t work past step 2.

Hi team,

I’m having the issue where my HTML is rendering an empty box with lines.

I’ve double/triple checked my file paths and I’ve added the module tag in my HTML.

Can anyone spot any syntax and/or logic errors in the code below that I might be missing?

import { getDataByRole, getDataByCompany } from "./salaryData.js";
import salaryData from "./salaryData.js";
import {
  getAverageSalaryByRole,
  getAverageSalaryByCompany,
  getSalaryAtCompany,
  getIndustryAverageSalary,
  calculateAverage,
} from "./workAroundModule.js";

const companies = getCompanies();
const roles = getRoles();

renderInputButtons(companies, "company");
renderInputButtons(roles, "role");

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

    let labelElement = document.createElement("label");
    labelElement.setAttribute("for", label);
    labelElement.innerText = label;
    divElement.appendChild(labelElement);

    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 (!company || !role) {
    return;
  }

  const averageSalaryByRole = getAverageSalaryByRole(role);
  const averageSalaryByCompany = getAverageSalaryByCompany(company);
  const salary = getSalaryAtCompany(company);
  const industryAverageSalary = getIndustryAverageSalary(company);

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

Thank you SO much everyone! I had redone this particular exercise three times. My issue was indeed I was importing salaryData.js incorrectly in workAroundModule.js.

I also made the mistake if adding role and company as arguments in workAroundModule.js for the function getSalaryAtCompany, when you just have to add company as an argument.

It looks like you didn’t import getCompanies and getRoles