Geek Answers Handbook

Change onClick button color

I want my Button change color every time I click on it. But it changes color only at the first press.

I believe the problem is with the setColor function. Each time I click on Button , count gets the value 1. Thus, even when I set it to 0, it gets reset to 1 the next click. How to fix it? Are there global variables in javascript / html where this is easy to solve?

 <!DOCTYPE html> <html> <head> <script> function setColor(btn, color){ var count=1; var property = document.getElementById(btn); if (count == 0){ property.style.backgroundColor = "#FFFFFF" count=1; } else{ property.style.backgroundColor = "#7FFF00" count=0; } } </script> </head> <body> <input type="button" id="button" value = "button" style= "color:white" onclick="setColor('button', '#101010')";/> </body> </html>
+7
javascript html button onclick global
source share
3 answers

There really are global variables in javascript. You can learn more about areas> that are useful in this situation.

Your code might look like this:

 <script> var count = 1; function setColor(btn, color) { var property = document.getElementById(btn); if (count == 0) { property.style.backgroundColor = "#FFFFFF" count = 1; } else { property.style.backgroundColor = "#7FFF00" count = 0; } } </script>

Hope this helps.

+8
source share

one.

 function setColor(e) { var target = e.target, count = +target.dataset.count; target.style.backgroundColor = count === 1 ? "#7FFF00" : '#FFFFFF'; target.dataset.count = count === 1 ? 0 : 1; /* () : ? - this is conditional (ternary) operator - equals if (count === 1) { target.style.backgroundColor = "#7FFF00"; target.dataset.count = 0; } else { target.style.backgroundColor = "#FFFFFF"; target.dataset.count = 1; } target.dataset - return all "data attributes" for current element, in the form of object, and you don't need use global variable in order to save the state 0 or 1 */ } <input type="button" id="button" value="button" style="color:white" onclick="setColor(event)"; data-count="1" />

2.

 function setColor(e) { var target = e.target, status = e.target.classList.contains('active'); e.target.classList.add(status ? 'inactive' : 'active'); e.target.classList.remove(status ? 'active' : 'inactive'); } .active { background-color: #7FFF00; } .inactive { background-color: #FFFFFF; } <input type="button" id="button" value="button" style="color:white" onclick="setColor(event)" />

([conditional (ternary) operator])

Example-1

Example-2

+5
source share

Each time you press setColor you set the counter = 1. You will need to define count outside the scope of the function. Example:

 var count=1; function setColor(btn, color){ var property = document.getElementById(btn); if (count == 0){ property.style.backgroundColor = "#FFFFFF" count=1; } else{ property.style.backgroundColor = "#7FFF00" count=0; } }
0
source share

More articles:


All Articles