CODEWITHSUNDEEP
javascriptcss
A. Meshu
A. Meshu

Reputation: 4148

Change style back and forth

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.

Upvotes: 9

Views: 4224

Answers (4)

Snowmonkey
Snowmonkey

Reputation: 3761

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!

Upvotes: 5

Geeky
Geeky

Reputation: 7498

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

Upvotes: 1

Peter Kota
Peter Kota

Reputation: 8340

Try something like this:

window.onload = function () {
  var flipColors = query("#change"); 
  var target = query(".demo");
  var clicked = false;
  flipColors.onclick = function() {
    if(clicked) {
      style(target, "color", "yellow");
      style(target, "background-color", "purple");
    } else {
      style(target, "color", "white");
      style(target, "background-color", "black");
    }
    clicked = !clicked;
  };
};

Shorter version:

window.onload = function () {
  var flipColors = query("#change"); 
  var target = query(".demo");
  var clicked = false;
  flipColors.onclick = function() {
    var color = clicked ? "yellow" : "white";
    var bgColor = clicked ? "purple" : "black";
    style(target, "color", color);
    style(target, "background-color", bgColor);
    clicked = !clicked;        
  };
};

Upvotes: 0

Okomikeruko
Okomikeruko

Reputation: 1173

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.

Upvotes: 2

Related Questions