Quiero cambiar el fondo del cuerpo cuando el usuario hace clic en un botón (Haga clic aquí para cambiar el color del fondo del cuerpo) en la parte superior de la página; aquí está la página: https://relaxed-ardinghelli-701d99.netlify.app/ Logré hacerlo solo una vez; Usé el bucle for para que el mismo código se ejecute 10 o 20 veces... pero no funciona:
for(let i=0; i<100; i++){ bg_button.addEventListener("click", funct2); function funct2(e) { body.style.backgroundColor = "lightgrey" section_top.style.backgroundColor="white" bg_button.addEventListener("click", funct3); function funct3(e) { body.style.backgroundColor = "white" section_top.style.backgroundColor=""}}}Si desea cambiar el color de fondo al hacer clic en el botón, debe usar la función de JavaScript y cambiar un estilo en la página HTML.
function chBackcolor(color) { document.body.style.background = color; }Es una función en JavaScript para cambiar el color, y llamará a esta función en su evento, por ejemplo:
<input type="button" onclick="chBackcolor('red');">Si lo desea solo por unos segundos, puede usar la función setTimeout:
window.setTimeout("chBackColor()",10000);Si desea que el botón alterne el color de fondo sin importar cuántas veces haga clic en él, puede hacerlo en un detector de eventos único que actualiza una variable de estado:
let toggleState = false function toggleBackground() { toggleState = !toggleState if (toggleState) { body.style.backgroundColor = "lightgrey" section_top.style.backgroundColor="white" } else { body.style.backgroundColor = "white" section_top.style.backgroundColor="" } } bg_button.addEventListener("click", toggleBackground);O puede reemplazar el detector de eventos en lugar de agregar uno nuevo al hacer clic:
function setBg1() { body.style.backgroundColor = "lightgrey" section_top.style.backgroundColor="white" bg_button.onclick = setBg2 } function setBg2() { body.style.backgroundColor = "white" section_top.style.backgroundColor="" bg_button.onclick = setBg1 } bg_button.onclick = setBg1Hola, usas la siguiente función:
function bgColorToggle () { const availableColors = ['blue','red']; for(int i=0;i<100;i++) { let color = availableColors[i%2]; setTimeout((document.body.style.color = color),2000); } }