Question

我正在进行一项任务，要求我将外部JS文件链接到HTML文件中。这是JS（文件名'whileLoop.js'）：

function evenCount () {

var loopCount = 2;

while (loopCount <= 101) {

    document.write(loopCount + " is an even number. <br /">);
    loopCount = (loopCount + 2);

    }

}

这是HTML：

<!DOCTYPE html>

<head>
<title>JS Assignment</title>
<head>

<body>

<script type="text/javascript" src="/whileLoop.js"></script>

</body>

</html>

如果我将原始JS代码（没有函数调用）复制到标记内的HTML文件中，那么HTML输出正确。当我尝试链接到HTML文件中的JS文件时，HTML会输出一个空白页。

预期输出是一个页面，列出2到101之间的每个偶数。

Answer 1

document.write行在<br /">处出现语法错误 - 请注意引号位于>左侧而不是右侧？

对于JS直接在HTML中而不是外部文件，您可以在HTML中包含任何JS，将其包含在<script></script>中，而当包含外部JS文件时，您需要使用<script> src属性指向该文件并确保<script src='whileLoop.js'>和结束</script>内的无。在特定情况下，如果您要使用外部文件，请确保whileLoop.js与index.html位于同一目录中，然后根据以下代码段将其包含在内：

以下是使用HTML中的脚本以及HTML中<head>部分中包含的另一个文件的代码。请注意，<head>中包含的脚本没有任何效果，我添加该行只是为了向您展示在代码中使用JS的两种方法。

＆＃13;

<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>

＆＃13;

Answer 2

您可以将标记和html更改为以下内容。我希望它也适合你：

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>

基本上你有未封闭的标签，这是你写的一个不完整渲染的DOM。这造成了一个不平衡的树错误。此外，你没有被调用JS（早些时候）。如果将代码包装在函数中，则必须调用它。

（PS：请注意JS文件名更改）

链接外部JS文件

2 个答案: