Question

假设我们的HTML文件有以下代码：

<html>
 <head>
  <script src="totti.js"></script>
 </head>
 <body>
  <span id="tim">this'll change on load</span>
 </body>
</html>

由于我不知道我能做到这一点，这是我想要实现的代码（例如.totti.js）：

function changeText(){
 document.getElementById("tim").innerHTML = "changed text";
}
changeText();

我想我们需要先将其id定义为变量，或者将其作为HTML方面的争论传递给它？帮助将不胜感激。感谢。

Answer 1

您的代码是正确的，但是，如果您将脚本放在head标记内，那么脚本将在文档加载之前执行，因此它将不起作用（标识为{{1的元素）那时还不存在）。

要解决此问题，您可以将脚本标记放在要修改的元素之后（或tim标记的底部），如下所示：

body

或者您可以在文档加载后运行该函数，如下所示：

<html>
 <head>
 </head>
 <body>
  <span id="tim">this'll change on load</span>
  <script src="totti.js"></script>
 </body>
</html>

在这种情况下，请从 totti.js 中删除<html> <head> <script src="totti.js"></script> </head> <body onload="changeText()"> <span id="tim">this'll change on load</span> </body> </html>行。

Answer 2

你几乎就在那里，这是正确的方法。但是，您的Javascript在＆＃34; tim＆＃34;之前加载并执行。元素被渲染，因此无法找到它。

将代码包装在加载所有DOM元素后触发的事件中：

document.addEventListener('DOMContentLoaded', function(){
    changeText();
});

function changeText(){
    document.getElementById("tim").innerHTML = "changed text";
}

请注意，函数本身不在事件回调中，所以它在javascript加载时正确注册。实际上只调用changeText()函数取决于DOM。

Answer 3

问题：
在元素创建之前，您正在使用document.getElementById("tim")访问dom元素。

有两种方法可以解决您的问题：

<强> 1。将script - 代码移至body - 代码的末尾：

<html>
 <head>
 </head>
 <body>
  <span id="tim">this'll change on load</span>
  <script src="totti.js"></script>
 </body>
</html>

<强> 2。使用onload：

<html>
 <head>
  <script src="totti.js"></script>
 </head>
 <body onload="changeText()">
  <span id="tim">this'll change on load</span>
 </body>
</html>

Answer 4

有三种方式：

在您的内容之后导入js文件。
使用window.onload = function（）{...}
document.addEventListener（'DOMContentLoaded'，function（）{...}

所以它可以找到元素。

Answer 5

如果需要在加载所有元素后执行更改，为什么不使用简单的JQuery函数。

$(document).ready (function (){ Document.getElementByID('tim').innerHTML = "changed text"; 
});

外部Javascript文件如何影响HTML文件的DOM？

5 个答案: