点击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

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

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

Answer 2

您需要停止提交表单 - 您可以通过将事件传回您的函数然后使用内置的preventDefault()函数来执行此操作。

请参阅下面的代码 - 我已将注释添加到我已更改的行

＆＃13;

＆＃13;

//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(e) { // pass event back here
    e.preventDefault(); // prevent default action of button - stops form being submitted
    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();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;