Change the style back and forth

Question

the 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 press the button, the style changes.

My question is what I need to add to JS when the button clicks again - it will restore the original style, and if you click it again, it will activate the function again instead of two buttons.

I know that I can create .demo and .demo1 and switch them, but I want to understand how to do this, if possible.

Note. Just JS, not jQuery, etc.

Answer 1

yup, toggle () works fine here. I created two switch classes, and javascript just includes one at first, then switches 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 really want to switch classes, but css attributes? Easy done. Try the following:

 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 can just as easily trigger the switch statement, for example toggleMe.style.color - I hope this helps!

Answer 2

The word that I think you are looking for is "Toggle". You want something to go from active to inactive and back and forth with each user interaction, i.e. Click event.

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

 target.classList.toggle("active"); 

will add “active” as a class to the target object if it is absent, and delete it if it is present. The following is information about the HTML DOM classList Property using toggle and other methods.

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

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

And here is the documentation for . toggleClass () jQuery method.

Answer 3

If you are trying to achieve a switch 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 this helps

Answer 4

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; }; };