Change style back and forth

Question

Code:

<style> .demo {color: yellow; background-color: purple} </style>
<p class="demo">my text</p>
<button id="change">click</button>
<script>
window.onload = function () {
var flipColors = query("#change"); 
  var target = query(".demo");
  flipColors.onclick = function() {
    style(target, "color", "white");
    style(target, "background-color", "black");
  };
};
</script>

When I click the button the style changes.

My question is what do I need to add to the JS that when the button clickes again - it would restore the original style, and if it is clicked again it will activate the function again, instead of making two buttons.

I know that I can create .demo and .demo1 classes and switch them, but I want to understand how to make it that way - if it is possible.

Note: Just plain JS, not JQuery etc.

Answer 1

yup, the toggle() works wonderfully well here. I did create a two toggle classes, and the javascript simply turns one on initially, then toggles the two states.

var flipColors = query("#change"); 
  var target = query(".demo");
  target.classList.add("demo-on");
  
  
  toggleClasses = function toggleClasses() {
    target.classList.toggle("demo-on");
    target.classList.toggle('demo-off');
  };

.demo-off {
  color: yellow;
  background-color: purple;
}
.demo-on {
  color: purple;
  background-color: yellow;
}

<p class="demo">my text</p>
<button id="change" onclick="toggleClasses()">click</button>

Ah, but you don't want to actually toggle the classes, but the css attributes? Easily done. Try this one:

var theToggle = document.getElementById("change");
var toggleMe = document.getElementsByClassName("demo")[0];
toggleMe.toggleStatus = "on";

theToggle.onclick = function(){
  switch(toggleMe.toggleStatus){
    case "on":
      toggleMe.toggleStatus="off";
      toggleMe.style.color = "purple";
      toggleMe.style.backgroundColor = "yellow";
      break;
    case "off":
      toggleMe.toggleStatus="on";
      toggleMe.style.color = "yellow";
      toggleMe.style.backgroundColor = "purple";
      break;
  }
}

.demo {
  width: 100px;
  height: 100px;
  color: yellow;
  background-color: purple
}

<p class="demo">my text</p>
<button id="change">click</button>

This is pure js, I'm adding a property that I use to check which status to use but you could just as easily run the switch statement off, for example, toggleMe.style.color -- Hope this helps!

Answer 2

The word I think you're looking for is "Toggle". You want something to go from Active to Inactive and back and forth with each user interaction, i.e. a click event.

Javascript has a function that handles that with a class. For example, the following line of code:

target.classList.toggle("active");

would add "active" as a class to the object target if it's absent, and remove it if it's present. Here is more info on HTML DOM classList Property with toggle and other methods.

But if you were looking for a jQuery solution, there's a similar function:

$(".class").toggleClass("active"); 

And here's the documentation for the .toggleClass() jQuery method.

Answer 3

If you are trying to achieve toggle behaviour using javascript

you can do as the following code snippet

check this snippet

window.onload = function() {
  var flipColors = document.querySelector("#change");
  var target = document.querySelector(".demo");
  flipColors.onclick = function() {
    toggleStylechanges(target, "color", "white");
    toggleStylechanges(target, "backgroundColor", "black");
  };
}

function toggleStylechanges(element, cssProp, color) {
  if (element.style[cssProp] == "")
    element.style[cssProp] = color;
  else
    element.style[cssProp] = "";
}

.demo {
  color: yellow;
  background-color: purple
}

<p class="demo">my text</p>
<button id="change">click</button>

Hope it helps