We Keep Coding

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

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.

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:

Only last javascript file linked with script tag is working

I linked all the javascript files in the header.php at atime. I included header.php in all pages
When I link the javascript files like this
<script src='js/home.js'></script>
<script src='js/disc.js'></script>
<script src='js/que.js'></script>
only last file js/que.js is working.

Make sure that the 'src' is referring to the correct file directory where the script is located. If you are using an IDE such as VS, then you may drag the file into the code and the IDE will automatically create the reference for you.

Unless you have problem with directory structure or you file name does not match with src attribute of script tag, there should not be any problem with. Please try to use type="text/javascript" and make sure your script tags are after header tag or just before </body> tag. Also keep sequence of files loading if any file depends on another file variable or any function. If it still does not work use try to see if there is any error in your code in console window.

I now I'm going to get voted down for this but oh well. I don't have enough points to comment which is what I would do but..oh well.
Okay it depends on what the scripts are doing. If you link the scripts in the head for you HTML page, and try a var element = document.getElementById("theID"); this will return null due to the fact that the browser has yet to read the HTML and hasn't had a chance to create a DOM (Document Object Model) tree. For a problem like this check out
<script>
function load() {
console.log("load event detected!");
}
window.onload = load;
</script>
This will assign window to an event/callback that will be invoked after the page has had time to load.
Look at where your JavaScript is used, and what it should be doing. Would those elements be rendered yet. Are you writing functions but not actually calling them (this happens A LOT)? It would be better if you described what the code was doing and your experience with HTML and JavaScript. Remember that the browser interprets the JavaScript as it encounters it, you can put script tags anywhere in your HTML file, not just in the head. Also are the .js files in the same directory as the HTML file or are the two non working .js files in the same directory as "js/que.js"? If not move them to the same file or use a relative or absolute path.

How add Javascript in GVnix/Spring roo project

I'm developing a web application and I want add a js file in my project to use it. I tried to add in this way:
<spring:url value="/resources/scripts/gestion.js" var="gestion"/>
<script src="${gestion}" type="text/javascript"></script>
The js loads correctly, but the problem is that the page is not showing anything, if I put this code in the end of the jsp file, before of tag <div> the jquery and another js file of the project not work although I can see the content of the jsp.
Somebody can help me with this?

You should include it into src/main/webapp/WEB-INF/tags/util/load-scripts.tagx file.
This tag is used by src/main/webapp/WEB-INF/layouts/default.jspx which is used by Apache Tiles configuration file src/main/webapp/WEB-INF/layouts/layouts.xml to generate the final html output.
Good luck!

Extract javascript from JSP to JS file

I'm trying to refactor parts of our front-end at the moment, using Intellij. We have a lot of javascript that is within our JSPs. I'd like to be able to extract from the JSP into a .js fil and replace it with a script tag referencing that file. I know how to extract to an 'includes' file, but I'd like a way of extracting and replacing the code with a proper script tag.
Does anyone know of a plugin that can accomplish this quickly and easily? (Or a pre-existing function in Intellij that I'm unaware of)

Please vote for this issue (it's 5 years old and had zero votes).

just create one file with .js extension copy and paste your js codes with their function names. then include that file in your jsp project header section.
eg:
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
thats all..

picking up a path in a javascript file

I need some help with my js file. I an using a bit of javascript to show some xml on a page and I need to reference the right xml file according to the page that it is on. e.g.
<script>
xml=loadXMLDoc("product.xml");
</script>
I have the all the xml files named as different products and have printed out the reference to the xml on the page that it should be on
<div id="product">/xmlfolder/item001.xml</div>
What I need to do is somehow reference the path on the page to the javascript. Is this possible?
Thanks

Do you mean
xml=loadXMLDoc(document.getElementById('prodct').innerHTML);