So I have a button on my website that looks like this:
<button id = "bgb">Toggle Background</button>
And I want this button to turn on and off the background in a box. Therefore I made a script in JavaScript to do this.
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;
}
}
However, when I click on the button, It tuns it off fine but when I want to turn it back on it doesn't work; any suggestions?
bg is always set true. why you change "bgb"?
try
<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>
Here is a demo of what you want:
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 already gave you a solution to your issue. However to make your entire code shorter and easier you could simply use: classList.toggle() and apply the changes by toggeling a CSS-Class on and off:
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>