CODEWITHSUNDEEP
javascripthtml
Liz
Liz

Reputation: 1437

Javascript Onclick Function Only Works Once

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?

Upvotes: 0

Views: 7628

Answers (3)

Yog Sharma
Yog Sharma

Reputation: 194

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);
}
});

Upvotes: 1

IQuick 143
IQuick 143

Reputation: 123

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>

Upvotes: 0

demonofthemist
demonofthemist

Reputation: 4199

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/

Upvotes: 1

Related Questions