Background toggle JS only works once-CodePudding

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?

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

@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>

CodePudding user response：

If it is not necessary, I will not use global variables to control the state.

In addition, you can also create a new class attribute, and you only need to control the class when switching.

Below are examples of both approaches for your reference.

document.querySelector('input[type=button]').onclick = function() {
  switchLinearGradientBackground('.main-box', 'linear-gradient');
}

function switchLinearGradientBackground(selector, switchClassName) {
  const elems = document.querySelectorAll(selector);
  for (let index = 0; index < elems.length; index  ) {
    elems[index].classList.toggle(switchClassName);
  }
}

body {
  display: flex;
}

.main-box {
  flex-direction: column;
  display: flex;
  width: 200px;
  height: 200px;
}

.linear-gradient {
  background: linear-gradient(45deg, #F17C58, #E94584, #24AADB, #27DBB1, #FFDC18, #FF3706) !important;
}

<div class='main-box' />
<input type='button' value="switch background">

document.querySelector('input[type=button]').onclick = function() {
  switchLinearGradientBackground('.main-box');
}

function switchLinearGradientBackground(selector) {
  const elems = document.querySelectorAll(selector);
  const grad = 'linear-gradient(45deg, #F17C58, #E94584, #24AADB, #27DBB1, #FFDC18, #FF3706)';
  for (let index = 0; index < elems.length; index  ) {
    const style = elems[index].style;
    style.background = style.background.length > 0 ? '' : grad;
  }
}

body {
  display: flex;
}

.main-box {
  flex-direction: column;
  display: flex;
  width: 200px;
  height: 200px;
}

<div class='main-box' />
<input type='button' value="switch background">