Así que tengo un botón en mi sitio web que se ve así:
<button id = "bgb">Toggle Background</button>
Y quiero que este botón encienda y apague el fondo en un cuadro. Por lo tanto, hice un script en JavaScript para hacer esto.
var bg = true; document.querySelector("#bgb").onclick = function(){ const mb = document.querySelector(".Main-Box"); if (bg == true) { mb.style.background = "white"; bgb = false; } if (bg == false) { mb.style.background = "linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706)"; bgb = true; } }Sin embargo, cuando hago clic en el botón, lo apaga bien, pero cuando quiero volver a encenderlo no funciona; ¿alguna sugerencia?
bg siempre se establece como verdadero. ¿Por qué cambias "bgb"?
probar
<script> var bg = true; document.querySelector("#bgb").onclick = function () { const mb = document.querySelector(".Main-Box"); if (bg) { mb.style.background = "red"; bg = false; } else { mb.style.background = "linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706)"; bg = true; } } </script>Aquí hay una demostración de lo que quieres:
let bg = true; document.querySelector("#bgb").onclick = function(){ const mb = document.querySelector(".Main-Box"); if (bg == true) { mb.style.background = "white"; bg = false; } else if (bg == false) { mb.style.background = "linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706)"; bg = true; } } .Main-Box { width: 100vw; height: 100vh; background: linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706); } <div class='Main-Box'> <button id="bgb">Click Me!</button> </div>@cSharp ya le dio una solución a su problema. Sin embargo, para acortar y simplificar todo el código, simplemente puede usar: classList.toggle() y aplicar los cambios activando y desactivando una clase CSS:
document.querySelector('#bgb').addEventListener("click", function() { document.querySelector('.Main-Box').classList.toggle('class-name'); }); .Main-Box { width: 100vw; height: 100vh; background: linear-gradient(45deg, #F17C58, #E94584, #24AADB, #27DBB1, #FFDC18, #FF3706); } .class-name { background: white; } /* for visualisation only */ body { margin: 0; } <div class='Main-Box'> <button id="bgb">Click Me!</button> </div>