Necesito un botón que pueda cambiar el color de fondo si haces clic en él dos veces. ¿Cómo puedo hacer esto?, solo sé hacerlo con 1 clic. Mi código es en realidad este:
<button onClick="document.body.style.backgroundColor ='#000';"> color </button>Use onDblClick en su lugar:
<button onDblClick="document.body.style.backgroundColor ='#000';"> color </button>Similar a la respuesta de @Spectric, almacene la cantidad de clics en una variable y agregue un detector de eventos de clic al botón.
No sé lógica es lo que se desea.
Podrías agregar otro botón con una idea igual a la colocada, pero al revés: restando.
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>Puede almacenar la cantidad de clics en una variable y agregar un detector de eventos de click al botón que incrementa el contador y verifica si es 2 y, de ser así, establece el color de fondo del cuerpo.
var clicks = 0; btn.addEventListener('click', function(){ if(++clicks == 2){ document.body.style.backgroundColor ='#000'; } }) <button id="btn"> color </button>