Question

我做了一些研究，但没有得到任何结果。情况就是这样。我有一个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”标签的文本不会改变。谢谢！

Answer 1

在您的JS文件中，您有：

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

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

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

Answer 2

你不需要这个：

<script>
reservationTime();
</script>

Answer 3

试试这段代码：

<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>

有些注意事项：

我在函数中添加了一个变量'testVersion'，然后我在三个地方调用它，在页面加载时你会看到带有'post'注释的代码，如果你注释掉帖子行（Put / /在行的开头）你不会看到任何变化，这是因为当读取'pre'行代码时，DOM中不存在#demo标记（它是通过顶部的代码工作而创建的点击点击应该有效，我添加了几秒钟，这样你就可以在每次点击时看到更改。
一旦确认代码正常工作，请将其移回外部文件，您可以使用chromes Developer tools之类的浏览器工具来确保页面已加载（如果该页面已加载，则应显示为404文件无法找到。）

从html文件运行外部javascript函数

3 个答案: