Linking External JS Files
Question
I am working on an assignment which requires that I link an external JS file into an HTML file. Here's the JS (file name 'whileLoop.js'):
function evenCount () {
var loopCount = 2;
while (loopCount <= 101) {
document.write(loopCount + " is an even number. <br /">);
loopCount = (loopCount + 2);
}
}
And here's the HTML:
<!DOCTYPE html>
<head>
<title>JS Assignment</title>
<head>
<body>
<script type="text/javascript" src="/whileLoop.js"></script>
</body>
</html>
If I copy the raw JS code (without the function call) into the HTML file inside the tags, then the HTML outputs correctly. When I attempt to link to the JS file inside the HTML file, the HTML outputs a blank page.
The expected output is a page that lists every even number between 2 and 101.
2 answers
solution1
0 ACCPTED 2017-09-09 15:40:28
The document.write line has a syntax error at <br /"> - notice the quotation mark being on the left of > rather than on the right?
As for JS being directly within HTML as opposed to an external file you can include any JS within HTML by wrapping it in <script></script> while when including an external JS file you need to use <script> with the src attribute pointing to that file and making sure there is nothing inside of the <script src='whileLoop.js'> and the closing </script> . In your specific case if you want to use the external file, make sure that whileLoop.js is in the same directory as your index.html and then include it as per the snippet below:
Here is your code working with the script being within HTML and another file included in the <head> part of your HTML. Please note that the script included in <head> had no effect and I added that line just to show you the two ways of having JS work within your code.
<head> <title>JS Assignment</title> <head> <script type="text/javascript" src="whileLoop.js"></script> </head> <body> <script> function evenCount () { var loopCount = 2; while (loopCount <= 101) { document.write(loopCount + " is an even number. <br />"); loopCount = (loopCount + 2); } } evenCount(); </script> </body>
solution2
0 2017-09-09 15:50:33
you could change the markup and html to the following. I hope it works for you too:
JS: while.js
function evenCount() {
console.log(loopCount);
var loopCount = 2;
while (loopCount <= 101) {
document.write(loopCount + " is an even number. <br />");
loopCount = (loopCount + 2);
}
}
evenCount();
HTML:
<!DOCTYPE html>
<html>
<head>
<title>JS Assignment</title>
</head>
<body>
<script type="text/javascript" src="/while.js"></script>
</body>
</html>
Basically you had unclosed tags and it was an incompletely rendered DOM you were writing into. This created an unbalanced tree error. Also, you JS was not being called (earlier). It has to be called if you wrap your code within a function.
(PS: please note the JS filename change)
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.