0

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

4

3 回答 3

1

在您的 JS 文件中，您有：

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

问题是带有“demo”的元素，因为在加载 JS 文件时 DOM 中尚不存在 id。浏览器在加载和评估 JS 的那一刻就开始执行它。如果您将 JS 文件放在您的脑海中，那么它会在浏览器知道您体内的任何元素之前执行此操作。

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

于 2013-09-25T14:38:00.843 回答
0

你不需要这个：

<script>
reservationTime();
</script>
于 2013-09-25T13:53:45.007 回答
0

试试这个代码：

<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”，然后我在三个地方调用它，在页面加载时，如果您注释掉帖子行（将 // 放在开头行）你不会看到任何变化，这是因为当读取“pre”行代码时，DOM中不存在#demo标签（它是在从上到下通过代码工作时创建的）点击应该可以工作，我添加了几秒钟，这样您每次单击时都可以看到变化。

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

于 2013-09-25T14:13:04.687 回答