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 " +counter + " 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); }Estoy creando una función en la que se deshabilitará un botón después de hacer clic, pero el contador anterior habilita automáticamente los botones, pero quiero que ambos se ejecuten i. E. Deshabilitar un botón después de hacer clic y también deshabilitar si el temporizador está funcionando y también habilitar los botones si no se hace clic en el botón
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>Podrías usar:
var elem = document.getElementById('button'); elem.addEventListener('click',buttonClicked); function buttonClicked(){ //do stuff console.log("clicked") elem.disabled = true; setTimeout(() => {elem.disabled =false}, 500); }