javascript - Javascript 中的点击计数器实现

Question

我在使用 Javascript 实现点击计数器时遇到了一些问题。我用谷歌搜索了它，但无法找出代码中的错误。

在下面的笔中，我使用 guesses 变量作为计数器。似乎每次我点击提交时，我的 guesses 变量都会重置为零。

The Number guessing game pen

我也在这里粘贴代码片段:

//let targetNumber = Math.floor(Math.random() * 10) + 1;
let targetNumber = 6;
var guesses = 0;

function init() {
  var button = document.getElementsByTagName("button")[0];
  button.addEventListener("click", function() {
    var guess = document.getElementsByName("number")[0]["value"];
    guesses += 1;
    guess = parseInt(guess);
    check(guess);
  });

}

function check(value) {
  if (guesses < 5) {
    if (value === targetNumber) {
      showWin();
    } else {
      showError();
    }
  } else {
    showLoss();
  }
}

function showWin() {
  var p = document.createElement("P");
  var t = document.createTextNode("You Won!");
  p.appendChild(t);
  document.body.appendChild(p);

  //document.getElementsByTagName("p")[0].innerHTML = "You Won!";
  document.getElementsByTagName("form")[0].style.display = "none";
}

function showError() {
  var p = document.createElement("P");
  var t = document.createTextNode("Incorrect Guess! Try again.");
  p.appendChild(t);
  document.body.appendChild(p);
}

function showLoss() {
  var p = document.createElement("P");
  var t = document.createTextNode("You Lost!");
  p.appendChild(t);
  document.body.appendChild(p);
  document.getElementsByTagName("form")[0].style.display = "none";
}

init();

<p>Guess a number between 1 and 10</p>
<form>
  <input type="text" name="number">
  <button>Submit</button>
</form>

Answer 1

在您的代码笔中，正在提交表单，导致页面重新加载。所以你真的总是重新开始，每次都将 guesses 变量重置为 0。

防止这种情况的最简单方法是将 type="button" 添加到 button 元素，以防止它自动提交表单。默认情况下，按钮类型为“提交”，这使他们提交包含表单(如果有)。