Javascript Onclick Function Only Works Once

Question

I have a hopefully pretty easy problem. I'm trying to create a JS function on my app where there's a number in HTML and every time it is clicked, another number is subtracted from it and the result displays.

(So far this much works.)

Then the action should be repeatable so the number keeps getting smaller.

(This part doesn't work yet.)

Finally, there's a reset button that, when clicked, resets the original number to a random number.

(The random number is found correctly, but when you click to subtract it subtracts from the original number, not from the randomly-chosen replacement number.)

Here's a partially-working JSFiddle

var s = document.getElementById('incrimentOfNumber').innerHTML
 var n = document.getElementById('countdownNumber').innerHTML
 var n = n - s;

 document.getElementById("countdownNumber").onclick = function updateNumber(){
  this.innerHTML = n;
 }

 document.getElementById("resetCountdown").onclick = function resetCountdown(){
  var n = Math.floor(Math.random() * 500) + 200;
  document.getElementById("countdownNumber").innerHTML = n;
 }

    <h3>Count down from the number you see in incriments of <span class="incrimentOfNumber" id="incrimentOfNumber">7</span>.
     <br />Tap the number to see the correct answer.
     <br />Repeat as needed.
 </h3>

    <div class="countdownNumber">
     <h1 id="countdownNumber">284</h1>
 </div>

    <div class="btn" id="resetCountdown">Reset</div>

Can anyone (1) double check what I've done to make sure I'm not doing things in a stupid way and (2) help me figure out how to get the repeatable action functioning?

`this.innerHTML = n` is assigning exactly the same `n` that is calculated _once_ when the page is loaded at `var n = n - s;`. That `n` never changes again. The `var n` in the second listener is a completely different `n` that is scoped to only that second function. The event listeners are working fine. That code also isn’t subtracting anything. — Sebastian Simon, Apr 08 '17 at 19:34
I tried putting `var n = n - s` inside the `updateNumber` function, but it just turned it to `undefined`... — Liz, Apr 08 '17 at 19:38
Put that line in the function, but remove the `var`. Everytime you use `var` in front of a variable, you scope it to the function, meaning that it’s not the same variable as the outside one anymore. If you remove `var`, you actually refer to the outside variable. See [Surprised that global variable has undefined value in JavaScript](http://stackoverflow.com/q/9085839/4642212). — Sebastian Simon, Apr 08 '17 at 19:42
Another reference that’s even closer to your issue: [On click function add number to variable - gives NaN](http://stackoverflow.com/q/42441315/4642212). — Sebastian Simon, Apr 08 '17 at 19:44

score 1 · Accepted Answer · answered Apr 08 '17 at 19:43

The issue is you are calculating value of n only once, it should be calculated on every click thus change you countdown click function to:

document.getElementById("countdownNumber").onclick = function updateNumber(){
        var s = document.getElementById('incrimentOfNumber').innerHTML
        var n = document.getElementById('countdownNumber').innerHTML
        n = n - s;
        this.innerHTML = n;
}

Here is a working demo:

https://jsfiddle.net/m3q8fn2x/

score 1 · Answer 2 · answered Jul 07 '20 at 14:53

If you are still struggling with this ,then consider the fact that when you declare a variable inside an event function its starting value is always the same , when the event is triggered. So consider this fact and declare variables outside the event function's scope.

const togglerBtn = document.getElementById("togglerBtn");

let temp = false;
togglerBtn.addEventListener("click", () => {
//   alert();

if (!temp) {
  togglerDiv.style.transform = "translateY(48px)";
  return (temp = true);
} else if (temp) {
  togglerDiv.style.transform = "translateY(-500px)";
  return (temp = false);
}
});

IQuick 143 · Answer 3 · 2017-04-08T19:52:51.940

Here is your working code:

You need to put the n = n - s part into the update number function so its called each time you click.

var s = document.getElementById('incrimentOfNumber').innerHTML
var n = document.getElementById('countdownNumber').innerHTML

document.getElementById("countdownNumber").onclick = function updateNumber() {
    n = n - s;
    this.innerHTML = n;
}

document.getElementById("resetCountdown").onclick = function resetCountdown(){
    n = Math.floor(Math.random() * 500) + 200;
    document.getElementById("countdownNumber").innerHTML = n;
}

    <h3>Count down from the number you see in incriments of <span class="incrimentOfNumber" id="incrimentOfNumber">7</span>.
     <br />Tap the number to see the correct answer.
     <br />Repeat as needed.
 </h3>

    <div class="countdownNumber">
     <h1 id="countdownNumber">284</h1>
 </div>

    <div class="btn" id="resetCountdown">Reset</div>

While this is a nice solution, it lacks the explanation. – Sebastian Simon Apr 08 '17 at 19:45 — Sebastian Simon, Apr 08 '17 at 19:45

Javascript Onclick Function Only Works Once

3 Answers3