Question

我对JavaScript很陌生，所以对于大多数专业人士来说这个问题可能很容易。

如果反应时间小于1秒，并且任何慢于1秒的分数将增加到5，我试图将分数增加10。

由于某种原因，分数不会增加，如果不到1秒则会保持10分，如果超过1秒则保持在5分。

任何帮助都将不胜感激！

这是我的JSFiddle我遇到的问题：https://jsfiddle.net/dtrinh888/aftyomdv/`var score = 0;

        if (reactionTime < 1) {

            document.getElementById("score").innerHTML = score+=10;

        }

        else {

            document.getElementById("score").innerHTML = score+=5;

        }

Answer 1

您每次都会将得分重置为0，因为它是您反复初始化的局部变量。如果您希望得分累积，那么您必须在更高级别的范围内声明score，以便其值可以从一个事件继续到下一个事件，并且仅在该更高范围内初始化一次，而不是在每个事件中。

在此处查看jsFiddle的修改版本：https://jsfiddle.net/jfriend00/qoju2z7g/

我提出了以下定义：

var score = 0;

到更高的范围，因此值可以从一个事件存活到下一个事件。

在您的代码中：

document.getElementById("box").onclick = function() {
    clickedTime = Date.now();
    reactionTime = (clickedTime - createdTime) / 1000;
    document.getElementById("box").style.backgroundColor = getRandomColor();
    document.getElementById("box").style.display = "none";
    document.getElementById("time").innerHTML = reactionTime + " seconds!";

    var score = 0;
    if (reactionTime < 1) {
        score += 10;
        document.getElementById("score").innerHTML = score;
    } else {
        score += 5;
        document.getElementById("score").innerHTML = score;
    }

    makeBox();
}

您可以看到变量score是一个局部变量。每次调用单击处理程序时，它都会初始化为0，然后您将其递增，并且它仅对单击处理程序的每个单独调用都是本地的，因此每次都会重新创建它，每次都初始化为0，增加5或10，然后每次丢弃。因此，毫不奇怪，它的值只有5或10。

将该变量的定义和初始化移动到从一个客户端事件持续到下一个客户端事件的更高范围，允许它从一次点击到下一次点击累积值。

Answer 2

您重新初始化得分变量，并在每次要增加时将其重置为零。你有两个选择：

每次从DOM元素获取上一个设置得分。 F.ex喜欢这个var score = parseInt(document.getElementById("score").innerHTML);
在更高级别声明分数（在框的点击事件功能之外）。这可能是最干净的解决方案。

使用JavaScript增加分数

2 个答案: