Change Button Color OnClick

Answer :

There are indeed global variables in javascript. You can learn more about scopes, which are helpful in this situation.

Your code could 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.

1.

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