Make a button disable at clicked but enable until countdown isn't zero

Question

function counter2(){
var counter =10;
var on=document.getElementById("bet");
setInterval(function(){
counter--;
if(counter==9){
    on.innerHTML = "";
    
    }
if(counter>=0){
    id=document.getElementById("res");
    var bet=document.getElementById("pts");
        
        var beth=document.getElementById("beth");
        var betv=document.getElementById("betv");
    id.innerHTML="Bet within&nbsp;" +counter + "&nbsp;seconds";;
    beth.disabled = false; //Beth is both Function and button //
    beth.style.backgroundColor = "#4CAF50";
    betv.disabled = false;
    betv.style.backgroundColor = "#008CBA";
    beth.style.cursor = 'pointer'; 
    betv.style.cursor = 'pointer'; 
    
    
    }
    if(counter==0){
        counter1();
        
        
        }

}, 1000);

}

I am making a function where a button will be disabled after clicked but the above counter automatically enables the buttons but i want both of them to be executed i. E. Disable a button after clicked and also disable if the timer is going on and also to enable the buttons if the button is not clicked

Answer 1

 document.addEventListener('DOMContentLoaded', () => { const myButton = document.getElementById('my-button'); const status = document.getElementById('status'); let counter = 10; let timerHandle; myButton.addEventListener('click', () => { status.innerText = `Button will enable in ${counter} seconds`; myButton.disabled = true; timerHandle = setInterval(() => { counter--; status.innerText = `Button will enable in ${counter} seconds`; if (counter === 0) { clearInterval(timerHandle); status.innerText = `Timer cleared.`; myButton.disabled = false; } }, 1000); }); });

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <style> p { color; red. } </style> </head> <body> <div> <p id="status"></p> </div> <div> <button id="my-button">Button</button> </div> <script src="script.js"></script> </body> </html>

Answer 2

You could use:

var elem = document.getElementById('button');
elem.addEventListener('click',buttonClicked);

function buttonClicked(){
//do stuff 
 console.log("clicked")
 elem.disabled = true;
 setTimeout(() => {elem.disabled  =false}, 500);
}

Make a button disable at clicked but enable until countdown isn't zero

Question

2 answers

solution1
2 ACCPTED 2022-03-18 08:02:58

solution2
1 2022-03-18 08:01:38

Make a button disable at clicked but enable until countdown isn't zero

Question

2 answers

solution1 2 ACCPTED 2022-03-18 08:02:58

solution2 1 2022-03-18 08:01:38

solution1
2 ACCPTED 2022-03-18 08:02:58

solution2
1 2022-03-18 08:01:38