从 html 文件运行外部 JavaScript 函数

Running external javascript function from an html file

本文关键字：JavaScript 函数 外部 运行 html 文件      更新时间：2023-09-26

我做了一些研究，但没有得到任何结果。情况就是这样。我有一个html文件和一个javascript文件。html 是：

<html>
<head>
<script src="js/calculateRemainigTime.js"></script>
<script>
reservationTime();
</script>
</head>    
<body>
<button onclick = "reservationTime()">Start</button>
<p id="demo">Result Here</p>
</body>

javascript 文件是：

function reservationTime()
{
var date = new Date();
var currHour = date.getHours()
var x = document.getElementById("demo");
x.innerHTML = "The example time is: " + currHour;
}

问题是当我按下"开始"按钮时，id = "demo" 的"p"标签的文本不会改变。谢谢！

在你的JS文件中，你有：

var x = document.getElementById("demo");

问题是带有"demo"的元素，因为加载 JS 文件时 DOM 中尚不存在 id。浏览器在加载和评估JS的那一刻就开始执行JS。如果你把JS文件放在你的脑海中，那么它在浏览器知道你身体中的任何元素之前就这样做了。

你可以侦听 DOMContentLoaded 事件，指示浏览器在 DOM 加载后执行你的 JS，或者将 JS 从头部移动到正文的末尾。

你不需要这个：

<script>
reservationTime();
</script>

试试这段代码：

<html>
<head>
<script>
function reservationTime(testVersion){
    var date = new Date();
    var currh = date.getHours();
    var currm = date.getMinutes();
    var currs= date.getSeconds();
    var x = document.getElementById("demo");
    x.innerHTML = "The example time is: " + 
        currh + " hours, " + currm + " minutes and " + 
        currs + " seconds. The test version is: " + testVersion;
}
reservationTime('pre');
</script>
</head>    
<body>
<button onclick = "reservationTime('click')">Start</button>
<p id="demo">Result Here</p>
<script>
reservationTime('post');
</script>
</body>

需要注意的一些事项：

  1. 我在函数中添加了一个变量"testVersion"，然后在三个地方调用它，在页面加载时，您将看到带有"post"注释的代码，如果您注释掉 post 行（将//放在行的开头）你不会看到任何变化，这是因为当读取代码的"pre"行时，DOM 中不存在 #demo 标签（它是在通过代码从上到下）点击应该有效，我添加了秒数，这样您每次点击都可以看到变化。

  2. 确认代码正常工作后，将其移回外部文件，您可以使用浏览器工具（如chromes开发人员工具）来确保页面已加载（如果找不到该文件，则应显示为404）。

相关文章：