No Radio-Style Input in WorkAround Explorer when functions are imported

[csspro09716]

In the WorkAround Explored project for Intermediate Java Script, found here https://www.codecademy.com/courses/learn-intermediate-javascript/projects/es6-modules-workaround, I get only the details box when I should get three boxes. If I comment out my import statement in main.js which is;

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

I will get all three boxes again.
from the guide to the project, I am under the impression that I should see all three boxes again once I change the script line in index.html to;

however the missing first two boxes persists.

incase it matters my export statements in salaryData.js are;

export {getRoles, getCompanies, getDataByRole, getDataByCompany};

export default salaryData;

I have narrowed it down to being something that happens after the import line as if I comment out the import line in main.js I get all three boxes again.

You must select a tag to post in this category. Please find the tag relating to the section of the course you are on E.g. loops, learn-compatibility

When you ask a question, don’t forget to include a link to the exercise or project you’re dealing with!

If you want to have the best chances of getting a useful answer quickly, make sure you follow our guidelines about how to ask a good question. That way you’ll be helping everyone – helping people to answer your question and helping others who are stuck to find the question and answer!

[csspro09716]

This is also the first project I have done where I do not use the console, therefore to mu knowlege I do not have console.log available for debugging.

[mirja_t]

@csspro09716

main.js which is;

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

If I remember correctly, main.js is located in a different directory than salaryData.js, which means that you use an incorrect import path.

@csspro09716

therefore to mu knowlege I do not have console.log available for debugging.

Yes, you can still use the console.log. But it is the console for the whole Codecademy page, which means that some logs are irrelevant for your purpose. But it will show your console.logs.

[csspro09716]

Thank you very much, salaryData.js was in a different directory than main.js and the program works now.

[rssbkk]

Hi, can either of you explain this further please?

How is it in a different directory? and how do we access that correctly if it is?

[mirja_t]

main.js is in the folder ‘files’.
salaryData.js is in the folder ‘modules’.

So you have to apply what you learned about relative paths:

../  // move one level up
./  // start the path in the directory where your current file is located

[rssbkk]

I get it now! thanks Mairja!

[tag5986279001]

Hello! I hope that I can reply here. I’ve got the same issue, but in step 8:

We are all set up now to use the functions defined in workAroundModule.js to calculate and render the data based on the user’s input selections.

In main.js, import the four functions from workAroundModule.js.

Before this happens, everything seems to be working well. However, once I’ve imported to main.js and connected these functions to the variables.

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

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

All media buttons disappears when I do this:

Thanks for any help in advance!

[kelfromdablock]

I had this same issue and found help on another forum. I found the issue is not so much in the importing into the main.js, but actually the importing & file path in workAroundModule.js.

Initially I had the importing in workAroundModules.js as:

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

but learned they are in the same folder and file path should actually be:

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

Hope this works and helps with any headaches (fingers crossed).

Cheers!

[tag5986279001]

It did @kelfromdablock ! Thank you for this.
Now that you mention it… Looks so obvious

Have a nice day and weekend!