Question

我有两个文件。

这是index.html：

<!DOCTYPE html>
<html>
  <head>
    <title>Question 2</title>
      <script type="text/javascript" src="q2.js"></script>
  </head>
  <body>
        <div id="output"></div>
  </body>
</html>

这是q2.js：

function go(a) {
  var out = document.getElementById("output");
out.innerHTML = "hdi";
}

window.onload=go()

它只是不起作用。它应该将空div填入＆＃34; hdi＆＃34;，但它没有。

但是，如果我在一个文件中使用q2.js执行此操作，则可以正常工作，如下所示：

<!DOCTYPE html>
<html>
<body>

<div id="output"></div>

<script>
var NUMBERS = 500;
var HEADERS = 20;

function go(a) {
var out = document.getElementById("output");
out.innerHTML = "hdi";
}

window.onload=go()
</script>

</body>
</html>

为什么使用一个文件时这个工作，但是当两个文件分开时不起作用？有没有办法使用2个文件？

非常感谢

Answer 1

您应该将实际函数分配给window.onload，而是调用该函数并指定未定义的返回值：

更改

window.onload=go()

要

window.onload=go;

它似乎只在第二个版本中正常工作，因为函数中引用的元素已经存在但实际上并没有等待load事件发生。

Answer 2

首先，将JavaScript代码放入自己的JavaScript文件中通常是一种很好的做法。更好的可维护性和可重用性。

其次，在结束＆lt;结束之前放置脚本通常是一种好习惯。 / body＆gt; 标记，而不是＆lt; head＆gt; 标记。如果您的代码位于 head 中，并且在正文中进一步向下引用元素，那么它将无法看到它们，因为它们尚未加载。

如果您在结束主体

之前移动脚本，您的代码应该有效

<body>
    <div id="output"></div>

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

如果脚本是分开的，则div的innerHTML不起作用

2 个答案: