0

Hello!

I am new to JavaScript. Please forgive my lack of JS vocabulary.

Context

I have three files:

  • index.html
  • main.js
  • sites.js

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

Explanation of code

index.html will run the main.js file.

main.js will import and run the function sitesMod() from sites.js

Problem

console.log(sites); should output https://site1.org/,https://site2.org/,https://site3.org/

instead, console.log(sites); outputs sites is not defined

What I know

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.

Improve this question
1
  • function sitesMod() doesn't return anything and running it does not create a global variable called sites - add return sites to the end of the functions, and do var sites = sitesMod() in main.js - I would recommend a refresher course on how functions work in javascript Commented Mar 5, 2022 at 7:24

3 Answers 3

Reset to default
1

Bro, i've noted two mistakes on your code:

  1. When you import and link your file on your .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;
  2. When you declare a variable inside a function it have a local scope and at the final of the execution is deleted, so you can not acess it outside of the scope, so:
import { sitesMod } from "/sites.js";
sitesMod();

console.log(sites);

Are wrong. Instead there are two ways:

  1. At your 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());
  1. Include a 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...

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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.

Improve this answer

Comments

1

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);
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.