Linking external JavaScript file to HTML
Question
I am new to JavaScript and trying to link my JavaScript code to HTML. Along with the code mentioned below I have also tried below variations in script tag in HTML but none of them worked.
Kindly let me know how to link my external file to HTML.
Here is my folder structure:
Examples of what I have tried -
<script type="text/javascript" src="~/js/vehicle.js">
</script>
<script type="text/javascript" src="~/Source Pakages/js/vehicle.js">
</script>
<script type="text/javascript" src="../js/vehicle.js">
</script>
<script type="text/javascript" src="../vehicle.js">
</script>
index.html -
<html>
<head>
<script type="text/javascript" src="G:\ajaxx\src\java\js\vehicle.js">
</script>
</head>
<body onload = "loadMovies()">
<div id = "p1"></div>
</body>
</html>
vehicle.js -
function loadMovies()
{
document.getElementById("p1").innerHTML = ' <select>'+
' <option value="volvo">Volvo</option>'+
' <option value="saab">Saab</option>'+
'<option value="mercedes">Mercedes</option>'+
'<option value="audi">Audi</option>'+
'</select>'
}
4 answers
solution1
1 2016-12-25 14:57:01
Also, put your function loadMovies() inside script tag
<script>
function loadMovies() {
...
}
</script>
solution2
0 2016-12-25 14:54:13
用这个：
<script type="text/javascript" src="../Source Packages/js/vehicle.js"></script>
solution3
0 2016-12-25 14:56:04
use this following code,
<html>
<head>
<script type="text/javascript" src="../Source Pakages/js/vehicle.js">
</script>
</head>
<body onload = "loadMovies()">
<div id = "p1"></div>
</body>
</html>
solution4
0 2016-12-25 15:22:02
It looks like you are trying to adapt code that you copied since your loadMovies() function has nothing to do with movies. It's okay to borrow code and adapt it to fit your situation, but you should change names to fit functionality. It makes your code easier to read.
If your JavaScript file was in the same directory as your HTML file, you could just use <script src="vehicle.js"></script> , but it's not which means that you have to follow the directory tree to the location of the .js file. In your case, that means going up two levels, and then down two levels like this. <script src="../../Source Packages/js/vehicle.js"></script> . I'm also assuming that the JavaScript that you are showing after your closing </html> tag is the contents of your .js file... right?
Since you are on a Windows machine, your file path will look a little different, but not much. You simply change the '/' to '\\' and it should all work. Here are two examples. The first is for a 'NIX machine (Unix, Linux, OSX, etc) and the second (which would apply to you) is for a windows machine. Note that while your pc may be Windows based, the server your code ends up on may not be, so it's important to know the difference.
(For 'NIX Machines) index.html -
<html>
<head>
<script type="text/javascript" src="../../Source Packages/js/vehicle.js"></script>
</head>
<body onload = "loadVehicles()">
<div id = "p1"></div>
</body>
</html>
vehicle.js -
function loadVehicles() {
document.getElementById("p1").innerHTML = ' <select>'+
' <option value="volvo">Volvo</option>'+
' <option value="saab">Saab</option>'+
'<option value="mercedes">Mercedes</option>'+
'<option value="audi">Audi</option>'+
'</select>';
}
(For Windows Machines) index.html -
<html>
<head>
<script type="text/javascript" src="..\..\Source Packages\js\vehicle.js"></script>
</head>
<body onload = "loadVehicles()">
<div id = "p1"></div>
</body>
</html>
vehicle.js -
function loadVehicles() {
document.getElementById("p1").innerHTML = ' <select>'+
' <option value="volvo">Volvo</option>'+
' <option value="saab">Saab</option>'+
'<option value="mercedes">Mercedes</option>'+
'<option value="audi">Audi</option>'+
'</select>';
}
This of course assumes that the folder structure is
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.