如何为另一个按钮功能制作点击计数器？答案

【问题标题】：How to make a click counter for another button function?如何为另一个按钮功能制作点击计数器？
【发布时间】：2019-11-02 12:50:26
【问题描述】：

我创建了一个函数来检查输入数字是否等于 Math.random()。我想制作另一个功能来检查在用户得到正确答案之前单击按钮的次数。

function guess() {
  var x = document.getElementById('this').value;
  var y = Math.floor((Math.random() * 10));

  if (x == y) {
    alert("Nice");
  } //correct answer
  else if (x > y) {
    alert("Lower");
  } else {
    alert("Higher");
  }
}

<body>
  <input type="number" min=1 max=2 id="this">
  <button type="button" onclick="guess()">Check</button>
</body>

我希望看到该数字已完成的尝试次数。

【问题讨论】：

您是否意识到每次用户单击按钮时都会生成一个新的随机数？所以弹出的提示是没用的

标签： javascript function button onclick counter

【解决方案1】：

考虑到 Nick Parsons 的评论，我将搜索到的号码移出功能。计数器还需要在函数外部定义，并在每次调用时加一。我还更改了您的代码，以在正确猜测时给出尝试次数。

var y = Math.floor((Math.random() * 10));
var counter = 0;

function guess() {
  var x = document.getElementById('this').value;
  counter += 1;
  
  if (x == y) {
    alert(`Nice. Took you ${counter} attempts`);
  } //correct answer
  else if (x > y) {
    alert("Lower");
  } else {
    alert("Higher");
  }
}

<body>
  <input type="number" min=1 max=10 id="this">
  <button type="button" onclick="guess()"> Check </button>
</body>

数字输入字段上的max 也不正确。

【讨论】：

【解决方案2】：

创建一个初始化为零的全局变量（例如counter），然后在每次单击按钮时递增：

var counter = 0;

var y = Math.floor((Math.random() * 10));

function guess() {
  var x = document.getElementById('this').value;
  counter += 1;
  if (x == y) {
    alert("Nice. You've guessed it in " + counter + " tries.");
    counter = 0;
  } //correct answer
  else if (x > y) {
    alert("Lower");
  } else {
    alert("Higher");
  }
}

虽然您没有要求，但请注意，我将 x 和 y 的初始化放在了事件处理函数之外。如果你把它放在里面，每次你点击按钮时，y 都会被设置为一个 new 随机数，这使得提示毫无用处（我推断你无论如何都不想这样做)。

【讨论】：

同意y，但x必须在里面，否则猜测不会更新。

【解决方案3】：

您必须首先声明一个全局变量来存储点击计数器，并且每次用户尝试不正确时，增加变量，最后如果成功尝试则提醒它。

【讨论】：