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, Nov 02 '22 at 03:07
@HenryWoody yes my index.html and main.js are in the same folder — Sam Lee, Nov 02 '22 at 03:13
@SamLee can you update the question with file explorer screenshot, so we can tell folder structure? — str1ng, Nov 02 '22 at 03:21
Hmm, just a guess, but the file in the screenshot has not been saved, are you sure you saved the file? — Henry Woody, Nov 02 '22 at 03:27
Also for debugging, you might add a simple `console.log("loaded")` to the `main.js` file so you can be sure it has loaded properly just to be sure whether it's an issue with loading the script or with the script itself — Henry Woody, Nov 02 '22 at 03:28
@SamLee It's due to blank spaces between `src = "main.js"`, you should make it `src="main.js"` — str1ng, Nov 02 '22 at 03:37
@HenryWoody I tried again after saving but the table still does not show. I am also using the live server vs code extension — Sam Lee, Nov 02 '22 at 03:39
@SamLee Just remove spaces and check my answer once again, I've updated it. Copy and paste and it will work — str1ng, Nov 02 '22 at 03:41
@str1ng those spaces are valid and are not the problem (see [this relevant question](https://stackoverflow.com/questions/7064095/spaces-between-html-attributes-and-values)) — Henry Woody, Nov 02 '22 at 03:45
@SamLee do you ever call `startGame`? That could be the issue — Henry Woody, Nov 02 '22 at 03:47
@HenryWoody It is indeed relevant and is the problem. Create simple html file and main.js file which will just go with `console.log("Something")` document and try to link script like this: `` and then after it try `` — str1ng, Nov 02 '22 at 03:48
@HenryWoody ahh... thank you that was the issue. I never called startGame(); in my main.js. I added that line and it works! thank you so much! — Sam Lee, Nov 02 '22 at 03:52
@HenryWoody just one question I was wondering why the table shows when I don't call startGame() function when I didn't link the main.js and added the js directly inside my html script tag? — Sam Lee, Nov 02 '22 at 03:54
@str1ng It's not, and I did do that to double check before I posted to avoid adding irrelevant and incorrect information here. Again I'll point you to [this question](https://stackoverflow.com/questions/7064095/spaces-between-html-attributes-and-values) and the [spec for HTML5](https://html.spec.whatwg.org/multipage/syntax.html#attributes-2) — Henry Woody, Nov 02 '22 at 04:31
@SamLee I'm really not sure, perhaps you called the function yourself in the console? On its own, the code you posted should not have updated the table. — Henry Woody, Nov 02 '22 at 04:32
@HenryWoody Well, I am not either somebody who will post answers/comments that would be missguiding or not being checked. I am fully aware that whitespaces are ignored, but how are we going to explain the situation which I left screenshots for? Btw. By using code extractor I copy pasted code of SamLee and separated javascript from HTML, exactly same result (with blankspaces I am getting "ERR_FILE_NOT_FOUND" and after removing blank spaces it was okay. This could be also caused by the browser, but still... — str1ng, Nov 02 '22 at 07:47
Please provide enough code so others can better understand or reproduce the problem. — Community, Nov 02 '22 at 10:59

str1ng · Answer 1 · 2022-11-02T04:19:35.873

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:

I removed the spaces and code looks like this "" 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? — Sam Lee, Nov 02 '22 at 03:48

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

1 Answers1