javascript - 如何将变量重置回默认值？

Question

我已经创建了 JavaScript 代码，其中有两个圆圈，如果您单击右侧的圆圈，您将获得 1 分。我想创建一个按钮，通过将我的 var 重置回 0 来重置游戏。

这是我到目前为止的代码

var result = document.getElementById("result");
    var head = document.getElementById("circle");
    var tails = document.getElementById("circle2");
    var win = document.getElementById("win");
    var loss = document.getElementById("loss");
    var winsorloss = 1;
    var winsorloss2 = 1;
    var winsorloss3 =1;
     var winsorloss4 = 1;


    head.addEventListener("click", function(){
        var num = Math.random()
        if (num > .50) {

            result.innerHTML="You clicked Heads and the result was Heads You won";
            win.innerHTML= winsorloss++
        }else{
            result.innerHTML="You clicked Heads and the result was Tails You lost";
            loss.innerHTML = winsorloss2++;
        }


    })

    tails.addEventListener("click", function(){
        var num2 = Math.random()
        if (num2 < .50) {

            result.innerHTML="You clicked Tails and the result was Tails You won";
            win.innerHTML=winsorloss3 = winsorloss++
        }else{
            result.innerHTML="You clicked Tails and the result was Heads You lost";
            loss.innerHTML=winsorloss4 =winsorloss2++;
        }


    })

最初，我有以下代码用于重置，但无法正常工作

function erase(){
    result.innerHTML="";
    win.innerHTML = winsorloss = 0;
    loss.innerHTML = winsorloss2 = 0;

}

Answer 1

变量的初始值都是1，而不是0。最初起作用的原因是因为您在更新它们时使用了后递增，因此您使用旧值更新 HTML，然后递增变量。最好将它们初始化为 0 并使用预增量，以便变量包含与结果中显示的内容相同的内容。

var result = document.getElementById("result");
var head = document.getElementById("circle");
var tails = document.getElementById("circle2");
var win = document.getElementById("win");
var loss = document.getElementById("loss");
var winsorloss = 0;
var winsorloss2 = 0;
var winsorloss3 = 0;
var winsorloss4 = 0;

head.addEventListener("click", function() {
  var num = Math.random()
  if (num > .50) {

    result.innerHTML = "You clicked Heads and the result was Heads You won";
    win.innerHTML = ++winsorloss;
  } else {
    result.innerHTML = "You clicked Heads and the result was Tails You lost";
    loss.innerHTML = ++winsorloss2;
  }
})

tails.addEventListener("click", function() {
  var num2 = Math.random()
  if (num2 < .50) {

    result.innerHTML = "You clicked Tails and the result was Tails You won";
    win.innerHTML = winsorloss3 = ++winsorloss;
  } else {
    result.innerHTML = "You clicked Tails and the result was Heads You lost";
    loss.innerHTML = winsorloss4 = ++winsorloss2;
  }
})

function reset() {
  winsorloss = winsorloss2 = winsorloss3 = winsorloss4 = 0;
  win.innerHTML = "0";
  loss.innerHTML = "0";
}