JavaScript 不能作为外部文件工作

JavaScript not working as an external file

本文关键字：文件 工作 外部 不能 JavaScript      更新时间：2023-09-26

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

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

这是我的主要.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>

我的主要.js只是：

document.getElementById（"data"）.innerHTML = "JUBA";

我浏览了互联网和这个论坛，但我找到的所有答案都没有奏效。

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

提前谢谢你。

当你调用main.js元素#data时，不是在DOM树中创建的。您可以通过在关闭正文之前放置指向 Javascript 文件的链接来解决此问题，如下所示：

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

文档对象模型 （DOM） 不是 "READY"。

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

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

如果需要比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>

主.js：

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

window.onload vs $（document）.ready（）

@Guffa回答：

ready 事件发生在 HTML 文档加载之后，而 onload 事件发生在所有内容（例如图像）也已加载时。

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

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

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

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

或

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

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

    window.onload=function（）{document.getElementById（"data"）.innerHTML = "JUBA";};

window.onload=function(){
document.getElementById("data").innerHTML = "JUBA";
};
 <p>WRF<br>
        <span id="data">18/09/1987</span></p>

相关文章：