链接外部JS文件
[英]Linking External JS Files
问题描述
I am working on an assignment which requires that I link an external JS file into an HTML file. 
我正在做一项作业，要求我将外部JS文件链接到HTML文件。 Here's the JS (file name 'whileLoop.js'): 这是JS（文件名“ 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: 这是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. 如果我将原始JS代码（不带函数调用）复制到标签内的HTML文件中，则HTML可以正确输出。 When I attempt to link to the JS file inside the HTML file, the HTML outputs a blank page. 当我尝试链接到HTML文件中的JS文件时，HTML输出空白页。
The expected output is a page that lists every even number between 2 and 101. 预期的输出是一个列出2到101之间的每个偶数的页面。
2 个解决方案
解决方案1
0 已采纳 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? document.write行在<br /">处存在语法错误-注意引号在>的左侧而不是在右侧？
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> . 对于直接在HTML中而不是外部文件中的JS，您可以通过将其包装在<script></script>在HTML中包含任何JS，而在包含外部JS文件时，则需要使用src属性指向的<script>到该文件，并确保有所述的内没什么 <script src='whileLoop.js'>和关闭</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: 在特定情况下，如果要使用外部文件，请确保whileLoop.js与index.html位于同一目录中，然后按照以下代码片段将其包括在内：
Here is your code working with the script being within HTML and another file included in the <head> part of your HTML. 这是您的代码，该脚本使用HTML中的脚本以及HTML的<head>部分中包含的另一个文件。 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>包含的脚本无效，我添加了这一行，只是为了向您展示使JS在代码内工作的两种方式。
<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>
解决方案2
0 2017-09-09 15:50:33
you could change the markup and html to the following. 您可以将标记和html更改为以下内容。 I hope it works for you too: 我希望它也对您有用：
JS: while.js 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: 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. 基本上，您有未关闭的标签，并且它是您正在写入的不完整呈现的DOM。 This created an unbalanced tree error. 这造成了不平衡的树错误。 Also, you JS was not being called (earlier). 另外，您的JS没有被调用（较早）。 It has to be called if you wrap your code within a function. 如果将代码包装在一个函数中，则必须调用它。
(PS: please note the JS filename change) （PS：请注意JS文件名更改）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.