Question

我是HTML，JavaScipt和编程相关的新手，我正在尝试创建一个简单的页面。

现在，我遇到了以下问题：我想更改main.html文件的日期，但main.js无效。我已将<script>位置更改为<body>内</span>之后，甚至</body>之后，但未成功。如果main.js的内容在HTML中，它可以正常工作，但作为外部文件，它不会。

这是我的main.html：

<!DOCTYPE html>
<html>
    <head>
        <link href="main.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="main.js"></script>
        <title>Page 1</title>
    </head>
    <body>
        <p>WRF<br>
        <span id="data">18/09/1987</span></p>
    </body>
</html>

我的main.js只是：

document.getElementById（“data”）。innerHTML =“JUBA”;

我通过互联网浏览了这个论坛，但我找到的所有答案都没有用。

文件位于同一目录中，main.css正常工作。

提前谢谢。

Answer 1

当你调用main.js时，元素#data没有在DOM树中创建。您可以通过在关闭正文之前将链接放到Javascript文件中来解决此问题：

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

Answer 2

Document Object Model (DOM)不是＆＃34; READY＆＃34;。

尝试在main.js中使用onload事件：

window.onload = function() {
     document.getElementById("data").innerHTML = "JUBA";
};

如果需要更多＆＃34;快速＆＃34;比onload使用jquery $(document).ready：

HTML：

<link href="main.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="main.js"></script>

main.js：

$(document).ready(function() {
  $("#data").html("JUBA");
});

window.onload vs $(document).ready()

@Guffa回答：

加载HTML文档后发生ready事件，而加载所有内容（例如图片）后，onload事件发生。

onload事件是DOM中的标准事件，而ready事件特定于jQuery。 ready事件的目的是它应该在文档加载后尽早发生，以便为页面中的元素添加功能的代码不必等待加载所有内容

Answer 3

运行脚本时，该元素尚不可访问。您可以将script放在页面末尾或延迟执行。

Answer 4

您可以在页面的其余部分之后将JavaScript放在<body>标记中。当浏览器加载它时，<span>将在那里进行编辑。

Answer 5

根据您的代码，将首先调用脚本然后将加载页面，因此当脚本运行时，将不会有任何元素具有id数据，因为还必须加载页面。有很多方法可以实现您的需求。 1.在身体结束之前或之后添加脚本标签，如

或

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

在body之前写入.js文件，即在head标签中，并在onload方法中编写整个javascript代码。

的window.onload =函数（）{ document.getElementById（＆＃34; data＆＃34;）。innerHTML =＆＃34; JUBA＆＃34 ;; };

＆＃13;

window.onload=function(){
document.getElementById("data").innerHTML = "JUBA";
};

＆＃13;

 <p>WRF<br>
        <span id="data">18/09/1987</span></p>

＆＃13;

JavaScript不能用作外部文件

5 个答案:

window.onload vs $(document).ready()