CODEWITHSUNDEEP
javascripthtml
Mohammed Asker
Mohammed Asker

Reputation: 71

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

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.

Upvotes: 0

Views: 160

Answers (5)

kamran
kamran

Reputation: 124

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>

Upvotes: 0

connexo
connexo

Reputation: 56753

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>

Upvotes: 1

Gowtham
Gowtham

Reputation: 1597

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>

Upvotes: 0

user11707511
user11707511

Reputation: 

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>

Upvotes: 0

random
random

Reputation: 7891

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>

Upvotes: 3

Related Questions