javascript - 更新变量的值

Question

如何在 JavaScript 中更新变量的值？ 我已经使用下面的代码尝试过，但它不起作用。 我拿了一个按钮和一个 p 标签，id 为 a、b、c。 如果 x=0，约翰就得一分。 如果 x=1，Rob 就得一分。 如果 x=2，Lee 得一分。 最初，当我运行代码时，显示 i,j,k 然后，x 更新，但 i、j、k 没有更新。 也就是说，如果 john 第二次得到 1 分，则 i 不会更新为 2。 请帮我解决这个问题。 请参阅下面的代码。

    document.getElementById("but").onclick=function(){
        var x=Math.random();
        x=3*x;
        x=Math.floor(x);
        var i=0,j=0,k=0;
        if(x==0){
            ++i;
            document.getElementById("a").innerHTML="John:" +" "+i;
        }else if(x==1){
            ++j;
            document.getElementById("b").innerHTML="Rob:" +" "+j;
        }else if(x==2){
            ++k;
            document.getElementById("c").innerHTML="Lee:" +" "+k;
        }
    }

Answer 1

That is if john gets a point for second time i is not being updated to 2

你没有在代码中做任何知道之前发生了什么的事情。您每次都分配给 innerHTML，覆盖元素的内容。

如果您想跟踪以前的值，则必须在更新之前从输入中获取值(笨重)，或者单独跟踪它们，例如在函数外部保存的对象中:

// An object to keep values in
var scores = {
  a: 0,
  b: 0,
  c: 0
};
document.getElementById("but").onclick = function() {
  var x = Math.random();
  x = 3 * x;
  x = Math.floor(x);
  if (x == 0) {
    ++scores.a;
    document.getElementById("a").innerHTML = "John:" + " " + scores.a;
  } else if (x == 1) {
    ++scores.b;
    document.getElementById("b").innerHTML = "Rob:" + " " + scores.b;
  } else if (x == 2) {
    ++scores.c;
    document.getElementById("c").innerHTML = "Lee:" + " " + scores.c;
  }
}
//

<input type="button" id="but" value="Click me">
<div id="a">(blank)</div>
<div id="b">(blank)</div>
<div id="c">(blank)</div>

我们可以进一步重构它，以减少重复的代码，并在值为 0 时预先初始化元素:

// An object to keep values in
var scores = [
  {name: "John", score: 0, id: "a"},
  {name: "Rob", score: 0, id: "b"},
  {name: "Lee", score: 0, id: "c"}
];
scores.forEach(showScore);
document.getElementById("but").onclick = function() {
  var entry = scores[Math.floor(Math.random() * 3)];
  ++entry.score;
  showScore(entry);
}
function showScore(entry) {
  document.getElementById(entry.id).innerHTML =
    entry.name + ":" + " " + entry.score;
}

<input type="button" id="but" value="Click me">
<div id="a">(blank)</div>
<div id="b">(blank)</div>
<div id="c">(blank)</div>