I am new to JavaScript. Please forgive my lack of JS vocabulary.
I have three files:
index.html
<body>
<h1>JavaScript Testing Zone</h1>
<script src="/main.js" type="module"></script>
</body>
main.js
import { sitesMod } from "/sites.js";
sitesMod();
console.log(sites);
sites.js
function sitesMod() {
var sites = [
'https://site1.org/',
'https://site2.org/',
'site3.org/'
];
}
export { sitesMod };
index.html will run the main.js file.
main.js will import and run the function sitesMod() from sites.js
console.log(sites); should output https://site1.org/,https://site2.org/,https://site3.org/
instead, console.log(sites); outputs sites is not defined
I realize that I need to declare something like var sites = X in main.js, but I am unsure how to transfer the content of var sites on sites.js to var sites on main.js
So far using the import and export modules seem to be taking me in the right direction.I need to bridge the final step of transferring the variable's data from one file to another.
I hope I was able to describe my problem in an intelligible way. Please let me know if I can clarify the question. Thank you.
There are two issues here. sitesMod is function with no return value so when you call it in main.js nothing happens. Change the function to:
function sitesMod() {
var sites = [
'https://site1.org/',
'https://site2.org/',
'site3.org/'
];
return sites;
}
Second issue is with the way you're using the function. Just calling the function doesn't declare a variable (sites) outside the body of the function. To access the sites variable you can do this:
import { sitesMod } from "/sites.js";
console.log(sitesMod());
I didn't try the code.
function sitesMod() doesn't return anything and running it does not create a global variable called sites
One solution is
sites.js
function sitesMod() {
var sites = [
'https://site1.org/',
'https://site2.org/',
'site3.org/'
];
return sites;
}
main.js
import { sitesMod } from "/sites.js";
const sites = sitesMod();
console.log(sites);
However, due to the trivial nature of sites.js - I'd be more inclined to simplify the code like
sites.js
const sites = [
'https://site1.org/',
'https://site2.org/',
'site3.org/'
];
export { sites };
main.js
import { sites } from "/sites.js";
console.log(sites);
Bro, i've noted two mistakes on your code:
.js and .html files you are pointing to the system root folder (eg. type="/main.js", import { sitesMod } from "/sites.js"; ). To point to the actual folder where are your folder use ./main.js for example and not just /, or just remove it, are the same;import { sitesMod } from "/sites.js";
sitesMod();
console.log(sites);
Are wrong. Instead there are two ways:
site.js:function sitesMod() {
var sites = [
'https://site1.org/',
'https://site2.org/',
'site3.org/'
];
return sites;
}
At main.js:
import { sitesMod } from "./sites.js";
console.log(sitesMod());
console.log() directly inside the function — the first is better ;):function sitesMod() {
var sites = [
'https://site1.org/',
'https://site2.org/',
'site3.org/'
];
console.log(sites);
}
export { sitesMod };
Tip: see more about scope and the difference between var, let and const and also more about Linux (you will understanding the / and ./) and a such more.
I hope it helped you, good studies XD
My english is a sucks, so forgive me for something...