javascript - onClick Button Only Works Once

I have a button that checks input text to see if it is the right password. The problem is that the button only works once and when you click multiple times it doesn't run the function over and over again.

My Code:

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

My Code:

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

Share Improve this question edited May 19, 2016 at 22:11 Mike Cluck 32.5k13 gold badges83 silver badges94 bronze badges asked May 19, 2016 at 22:05 RomanK 1541 gold badge2 silver badges14 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 1

It is being called multiple times, but you aren't seeing a change because attempts is defined inside of the function. That means that every time you run that functions, attempts is being reset to 5. To fix that, move the attempts declaration outside of the function.

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>

You are initializing the value of "attempts" and decrementing it every time you call the function. Hence it seems like the function is being called only once.

Move the deceleration of the variable outside the function. Something like

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

Another slightly better way would be to make use of localStorage or sessionStorage or even using cookies.

Thanks, Paras

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - onClick Button Only Works Once - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)