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