WorkAround Explorer issue

Thank you very much!

Hi, I am having exactly the same issue. In the last step, the ‘Details’ column shows only 3 dots. I spent hours reading through the solutions here, googling and of course trying to figure out the console error I am getting:
Uncaught TypeError: document.querySelector(…) is null

updateResults https://430e9c1ce67c48edabefad8d71f9a2ac.cc-propeller.cloud/main.js:53

Uncaught TypeError: roleAtCompany is undefined

getSalaryAtCompany https://430e9c1ce67c48edabefad8d71f9a2ac.cc-propeller.cloud/modules/workAroundModule.js:22

Can please anyone help me with that? I am close to simply quit CC because of this annoying issue and no support from their side… :frowning:
This is my code: (export in salaryData.js)

export { getRoles, getCompanies, getDataByRole, getDataByCompany };
export default salaryData;

WorkAroundModule:

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(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 = importedSalaryData.map(obj => obj.salary);
return calculateAverage(allSalaries);
}

export { getAverageSalaryByRole, getAverageSalaryByCompany, getSalaryAtCompany, getIndustryAverageSalary};

And main.js;

import { getRoles, getCompanies } from ‘./modules/salaryData.js’;

import salaryData from ‘./modules/salaryData.js’;

import { getAverageSalaryByRole, getAverageSalaryByCompany, getSalaryAtCompany, getIndustryAverageSalary} from ‘./modules/workAroundModule.js’;

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

Thank you so much for any help here!!

The code you posted looks okay to me.

I had the following code after the import statements in main.js

// TODO: Get the companies and roles using the salaryData module.
const companies = getCompanies();
const roles = getRoles();

Also, for step 4, I changed the script tag in index.html to be

<script type="module" src="main.js" defer></script>

I also had to select a role and company on the webpage in order for anything to show up in the Details part.

Hi @janbazant1107978602
Thank you! Yes I have those lines of code you mentioned too:

index.html

<script type="module" src="main.js" defer></script>

main.js:
const companies = getCompanies();
const roles = getRoles();

I have no idea what can cause the issue. The console error I posted occurs when I select an option…

SOLVED IT!!! :slight_smile: :slight_smile:
I had an import syntax mistake in the workAroundModule.js:
import salaryData from ‘./salaryData.js’;

and referenced it as :
const getIndustryAverageSalary = () => {
const allSalaries = importedSalaryData.map(obj => obj.salary);
return calculateAverage(allSalaries);
}

I fixed the import to
import importedSalaryData from ‘./salaryData.js’;

Now it’s working. Sometimes taking a break and coming back with fresh eyes really does the trick.

1 Like

This worked for me as well

1 Like

I have problems to displays details section

this worked for me I had not typed in the parameters.