Difference between linking a javascript file and directly adding script into html

Question

I am recreating a javascript game which requires tables, but when I link my javascript file to my index.html the grid does not show on my browser, but when I directly add my javascript inside the script tag in my html, the grid shows on the browser.

Any help would be appreciated thank you!

This is my code by referencing a js file inside html(the tables do not show) html with js link

This is my code without referencing a js file(tables do show) html without js link

This is my main.js main js

This is the browser without linking js file browser without js file

This is my browser with linking js file browser with js reference

First I linked the js file with script src=js path but it did not work but it worked when I put the javascript directly inside the html script tag. I was wondering how I can make it work with referencing a separate js file for a cleaner html code.

@HenryWoody the dev console shows "DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND" -- could this be the issue? This error also shows up even when the table shows(no javascript file linked) — Sam Lee
– Sam Lee, Commented Nov 2, 2022 at 3:07
Hmm, just a guess, but the file in the screenshot has not been saved, are you sure you saved the file? — Henry
– Henry, Commented Nov 2, 2022 at 3:27

str1ng · Accepted Answer · 2022-11-02 04:19:35Z

0

It's due to that your local paths are not resolving correctly. Without seeing directory structure I can't know what could be wrong.

First of all, please re-check and verify that both files main.js and index.html are in the same directory.

Alternatively, you could create folder called js inside of your main directory (where index.html is) and then move the main.js into that folder and try:

<script type="text/javascript" src="/js/main.js"></script>

index.html and main.js files must be at the same directory in order to include .js file as you did

<script type="text/javascript" src="main.js"></script>

UPDATE (I will leave answer whole, if somebody also gets stuck, so they can troubleshoot the problem):

The reason why it couldn't resolve path is because there was blank spaces between src and = ; when giving src, that part needs to be connected.

Just like this

<script type="text/javascript" src="main.js"></script>

Take a look here:

What happens:

edited Nov 2, 2022 at 4:19

answered Nov 2, 2022 at 3:32

str1ng

5796 silver badges19 bronze badges

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

2 Comments

Sam Lee Over a year ago

I removed the spaces and code looks like this "<script src="main.js"></script>" but the tables still do not show. I ran console.log("loaded") on my main.js file and it says there is a reference error:document is not defined. Is the reference error causing the problem?

str1ng Over a year ago

@SamLee Just try to move <script src="main.js"></script> before closing </body>

Collectives™ on Stack Overflow

Difference between linking a javascript file and directly adding script into html

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related