quiero agregar una nueva función después de hacer clic en el botón 3 veces y borrar/eliminar la función anterior
archivo HTML:
<body> <div id="background"> <p>this background white, before</p> </div> <button class="btn-1">change color</button> </body>JavaScript:
const btn1 = document.querySelector(".btn-1") ; const bg = document.getElementById("background") const toRed = ()=>{ bg.style.backgroundColor = "red"; } const toBlue = ()=>{ bg.style.backgroundColor = "steelblue"; } btn1.addEventListener('click', toRed);// quiero que este btn1 tenga una función para borrar la función de rojo y agregar a azul en su lugar después de hacer clic 3 veces
elimine el detector de eventos y agregue uno nuevo cuando se hizo clic tres veces:
const btn1 = document.querySelector(".btn-1"); const bg = document.getElementById("background"); var redClicked = 0; const toRed = ()=>{ bg.style.backgroundColor = "red"; redClicked++; if (redClicked >= 3) { btn1.removeEventListener('click', toRed); btn1.addEventListener('click', toBlue); } } const toBlue = ()=>{ bg.style.backgroundColor = "steelblue"; } btn1.addEventListener('click', toRed); <body> <div id="background"> <p>this background white, before</p> </div> <button class="btn-1">change color</button> </body>