用按钮添加[重复]答案

【问题标题】：Adding with a button [duplicate]用按钮添加[重复]
【发布时间】：2016-10-03 00:10:17
【问题描述】：

我目前有一个 Javascript 游戏，游戏中每个小时都会发生其他事情。

游戏设置为凌晨 12 点开始，我想通过点击按钮将时间增加一小时。

我现在的情况如下

// time-related info 
var gameTime = 0;  // begin logging time, 12 a.m.
document.getElementById("clock").innerHTML = "Time: " + "12 a.m."; // start the clock at midnight 
function updateTime() {
var clock = document.getElementById("clock");
gameTime++;
if (gameTime >= 24) {
    gameTime = 0;
    clock.innerHTML = "Time: 12 a.m."
} else if (gameTime === 12) {
    clock.innerHTML = "Time: " + gameTime + " p.m.";
} else if (gameTime > 12) {
    clock.innerHTML = "Time: " + (gameTime - 12) + " p.m.";
} else {
    clock.innerHTML = "Time: " + gameTime + " a.m.";
}
}

【问题讨论】：

您的具体问题是什么？
如何添加一个按钮会占用1个数字
但是具体是什么问题呢？创建按钮（我猜应该是<button>Add</button>）？如何绑定事件处理程序？如何在 JavaScript 中添加两个值？我相信您已经可以在互联网上找到所有这些的解决方案。例如。 google.com/search?q=javascript+bind+event+handler 。将您的问题分解为更小的问题并为这些问题找到解决方案。
好吧，我知道将是按钮的 html。我不确定如何实现 javascript 以使 onclick 增加
您似乎已经有了增加时钟的代码。所以你只想知道点击按钮时如何调用该函数？

标签： javascript

【解决方案1】：

// time-related info 
var gameTime = 0;  // begin logging time, 12 a.m.
document.getElementById("clock").innerHTML = "Time: " + "12 a.m."; // start the clock at midnight 
function updateTime() {
var clock = document.getElementById("clock");
gameTime++;
if (gameTime >= 24) {
    gameTime = 0;
    clock.innerHTML = "Time: 12 a.m."
} else if (gameTime === 12) {
    clock.innerHTML = "Time: " + gameTime + " p.m.";
} else if (gameTime > 12) {
    clock.innerHTML = "Time: " + (gameTime - 12) + " p.m.";
} else {
    clock.innerHTML = "Time: " + gameTime + " a.m.";
}
}

<button onclick="updateTime()" >click here</button>
<span Id="clock"/>

【讨论】：

太棒了，好像我已经添加了。我只需要调用函数 onclick

【解决方案2】：

只需添加

var clock = document.getElementById("clock");
clock.addEventListener('click', updateTime);

【讨论】：

clock.addEventListener('click', updateTime()); 不正确。您需要将一个函数传递给clock.addEventListener。
@FelixKling 和function updateTime() 哪里不是函数？
这是一个函数调用
updateTime 是一个函数，但您将updateTime() 的返回值传递给addEventListener。
已更新。 @FelixKling，当你不测试时会经过的东西。哈哈。谢谢