How to execute JavaScript code when a user clicks the button multiple times?

Question

I'm creating a simple task where the text shows up after a user clicks the button 3 times. However, the code does not appear to work as I expected.

I've tried adding double bracket inside the if statement as outlined in the MDN guide without luck and also checked similar questions in Stack Overflow like this one, but they're using jquery, so I have no idea how it works.

Here's my codes:

function countDown() {
  var currentval = document.getElementById("countDownBtn").innerHTML;
  var newval = currentval - 0;
  if (currentval > 0) {
    newval = currentval - 1;
  }
  document.getElementById("countDownBtn").innerHTML = newval;
}
if (currentval = 0) {
  document.getElementById("newText").innerHTML = "You clicked 3 times!;
}

<button id="countDownBtn" onclick="countDown()">3</button>
<p id="newText"></p>

I'm sure I'm missing something important here and I will be appreciated for your guidance.

currentval = 0 will always be true, since you are assigning instead of comparing. For comparison, use == (does not compare type) or === (includes type). — connexo
– connexo, Commented Jul 1, 2019 at 9:53
if (currentval = 0) is wrong. if (currentval == 0) is correct. Also var scope in js is limited to its function or object. so you have no access no currentval's value outside your function. e.g: in your last if statement. — Pouria Moosavi
– Pouria Moosavi, Commented Jul 1, 2019 at 9:53
How could I miss that? Okay, It's one thing to write outside the function code which is on me. But, how can you tell if you should use one equal or two equals? I heard that even experienced developers are having the same problem. — Mohammed Asker
– Mohammed Asker, Commented Jul 1, 2019 at 14:39

random · Accepted Answer · 2019-07-01 09:52:11Z

3

if (currentval = 0) { it should be if (currentval == 0) { and your if condition is outside of countDown() function.

function countDown() {
  var currentval = document.getElementById("countDownBtn").innerHTML;
  console.log(currentval);
  var newval = currentval - 0;
  if (currentval > 0) {
    newval = currentval - 1;
  }
  document.getElementById("countDownBtn").innerHTML = newval;
  if (currentval == 0) {
    document.getElementById("newText").innerHTML = "You clicked 3 times!";
  }
}

<button id="countDownBtn" onclick="countDown()">3</button>
<p id="newText"></p>

answered Jul 1, 2019 at 9:52

random

7,9093 gold badges21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

connexo · Accepted Answer · 2019-07-01 09:58:43Z

1

The errors you made have already been mentioned, I just wanted to add an answer with a little more modern and concise code. You really shouldn't use inline eventlisteners like onclick, instead use HTMLElement.prototype.addEventListener:

countDownBtn.addEventListener('click', () => {
  if (Number(countDownBtn.textContent)) {
    countDownBtn.textContent -= 1;
  }
  if (!Number(countDownBtn.textContent)) {
    countDownBtn.disabled = true;
    newText.textContent = "You clicked 3 times!";
  }
})

<button id="countDownBtn">3</button>
<p id="newText"></p>

answered Jul 1, 2019 at 9:58

connexo

57.3k15 gold badges112 silver badges150 bronze badges

Comments

user11707511 · Accepted Answer · 2019-07-01 09:55:31Z

0

count = 0
function countDown() {
  var currentval = document.getElementById("countDownBtn").innerHTML;
 
  if (count < 3) {
    count = count+1
  }else{
  alert("hi")
  }
}

<button id="countDownBtn" onclick="countDown()">3</button>
<p id="newText"></p>

answered Jul 1, 2019 at 9:55

user11707511

Comments

Gowtham · Accepted Answer · 2019-07-01 09:55:37Z

0

You have missed "=" operator(currentval == 0)

 function countDown() {
    var currentval = document.getElementById("countDownBtn").innerHTML;
    var newval = currentval - 0;
    if (currentval > 0) {
    newval = currentval - 1;
    }
    document.getElementById("countDownBtn").innerHTML = newval;
    if (currentval == 0) { 
    document.getElementById("newText").innerHTML = "You clicked 3 times!;"
    }
}

<button id="countDownBtn" onclick="countDown()">3</button>
<p id="newText"></p>

answered Jul 1, 2019 at 9:55

Gowtham

1,59712 silver badges24 bronze badges

Comments

kamran · Accepted Answer · 2019-07-01 10:15:37Z

0

Adding to the above answer a more concise code would be:

countDownBtn.addEventListener('click', (e) => {
  if (Number(e.target.innerHTML)) {
    e.target.innerHTML -= 1;
  }else{
    e.target.disabled = true;
    newText.textContent = "You clicked 3 times!";
  }
})

<button id="countDownBtn">3</button>
<p id="newText"></p>

answered Jul 1, 2019 at 10:15

kamran

1246 bronze badges

Collectives™ on Stack Overflow

How to execute JavaScript code when a user clicks the button multiple times?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related