从html文件运行外部javascript函数

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文件时，该ID在DOM中尚不存在。 浏览器在加载和评估JS之后即开始执行JS。 而且，如果您将JS文件放在头上，那么它就会在浏览器知道您体内的任何元素之前执行此操作。

您可以侦听DOMContentLoaded事件，该事件指示浏览器在DOM加载后执行JS，或者将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”注释的代码）。行），您将看不到任何更改，这是因为在读取“ pre”行代码后，DOM中不存在#demo标记（它是从上到下遍历代码而创建的）应该可以使用，我增加了几秒钟，以便您每次单击都可以看到更改。
确认代码可以正常工作后，将其移回外部文件，即可使用chromes Developer工具之类的浏览器工具来确保页面已加载（如果找不到文件，则页面应显示为404）。

从html文件运行外部javascript函数

问题描述

3 个解决方案

解决方案1
1 已采纳 2013-09-25 14:38:00

解决方案2
0 2013-09-25 13:53:45

解决方案3
0 2013-09-25 14:13:04

从html文件运行外部javascript函数

问题描述

3 个解决方案

解决方案1 1 已采纳 2013-09-25 14:38:00

解决方案2 0 2013-09-25 13:53:45

解决方案3 0 2013-09-25 14:13:04

解决方案1
1 已采纳 2013-09-25 14:38:00

解决方案2
0 2013-09-25 13:53:45

解决方案3
0 2013-09-25 14:13:04