onClick 按钮只能使用一次答案

【问题标题】：onClick Button Only Works OnceonClick 按钮只能使用一次
【发布时间】：2016-05-19 22:05:46
【问题描述】：

我有一个按钮，用于检查输入文本以查看它是否是正确的密码。问题是该按钮只能工作一次，并且当您单击多次时，它不会一遍又一遍地运行该功能。

我的代码：

<html>

<head>
  <title>Password</title>
  <script>
  function passcheck() {
    var attempts = 5;
    var q = document.getElementById('txt').value;
    if (q == "12345") {
      document.getElementById("result").innerHTML = "You're In!";
    } else {
      attempts--;
      document.getElementById("result").innerHTML = "Wrong password, You Have " + attempts + " Tries Left!";
    }
  }
  </script>
</head>

<body>
  <font face="Verdana" size="5"><b>Enter Your Password:</b></font>
  <br/><br/>
  <input id="txt" type="text" onclick="this.select()" style="text-align:center;" width="25">
  <button type="button" onclick="passcheck()">Submit!</button>
  <p id="result"></p>

</body>

</html>

【问题讨论】：

标签： javascript html button onclick

【解决方案1】：

它被多次调用，但您没有看到变化，因为attempts 是在函数内部定义的。这意味着每次运行该函数时，attempts 都会被重置为 5。要解决此问题，请将 attempts 声明移到函数外部。

var attempts = 5; // Moved to here so we don't reset the value

function passcheck() {
  var q = document.getElementById('txt').value;
  if (q == "12345") {
    document.getElementById("result").innerHTML = "You're In!";
  } else {
    attempts--;
    document.getElementById("result").innerHTML = "Wrong password, You Have " + attempts + " Tries Left!";
  }
}

<font face="Verdana" size="5"><b>Enter Your Password:</b></font>
<br/>
<br/>
<input id="txt" type="text" onclick="this.select()" style="text-align:center;" width="25">
<button type="button" onclick="passcheck()">Submit!</button>
<p id="result"></p>

【讨论】：

【解决方案2】：

您正在初始化“尝试”的值并在每次调用该函数时递减它。因此，该函数似乎只被调用一次。

将变量的减速度移到函数外。像

var attempts = 5;
function passcheck() {
  //code here ...
}

另一种稍微好一点的方法是使用 localStorage or sessionStorage 甚至使用 cookie。

谢谢，帕拉斯

【讨论】：