I need a button which can change the background color if you click it 2x. How can I do this?, I only know how to do it with 1 click. My code is actually this:
<button onClick="document.body.style.backgroundColor ='#000';"> color </button>
Use onDblClick instead:
<button onDblClick="document.body.style.backgroundColor ='#000';"> color </button>
Similar to the response of @Spectric, store the number of clicks in a variable and add a click event listener to the button.
I don't know logic is what is desired.
You could add another button with an idea equal to the one placed, but in reverse: subtracting.
const btnEle = document.querySelector(".btn");
const resEle = document.querySelector(".result");
const legendEle = document.querySelector("#legend");
let clickCount = 0;
btnEle.addEventListener("click", () => {
clickCount++;
resEle.innerHTML = "The button has been clicked " + clickCount + " times ";
if (clickCount > 1) {
document.body.style.backgroundColor ='#000';
legendEle.style.color = '#1E5128';
}
});body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: blueviolet;
}<div class="result"></div>
<br />
<button class="btn">CLICK HERE</button>
<h3 id="legend">Click on the above button to check if the button is clicked</h3>You can store the number of clicks in a variable and add a click event listener to the button that increments the counter and checks whether it is 2, and if so, sets the background color of the body.
var clicks = 0;
btn.addEventListener('click', function(){
if(++clicks == 2){
document.body.style.backgroundColor ='#000';
}
})<button id="btn"> color </button>