Change Button color onClick

Question

I want my Button to change color every time I click on it  But it only changes color on the first click    I believe the problem is in the setColor function  Every time I click on the Button  count gets set to 1  So even when I set it to 0  it gets reset to 1 on the next click  How do I fix this  Are there global variables in javascript html where this would easily be solved    lt  DOCTYPE html gt   lt html gt   lt head gt    lt script gt  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            lt  script gt   lt  head gt    lt body gt    lt input type  button  id  button  value    button  style   color white  onclick  setColor  button     101010      gt    lt  body gt   lt  html gt

User · Answer

Using jquery  try this  if your button id is say id  clickme    quot clickme quot   on    lick   function      this  css  background-color    grey

User · Answer

Every time setColor gets hit  you are setting count   1  You would need to define count outside of 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

User · Answer

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            lt input    type  button     id  button     value  button     style  color white     onclick  setColor event       data-count  1     gt    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      lt input    type  button     id  button     value  button     style  color white     onclick  setColor event      gt      conditional  ternary  operator    Example-1  Example-2

User · 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    lt script gt      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                   lt  script gt    Hope this helps

[javascript] Change Button color onClick

Examples related to javascript

Examples related to html

Examples related to button

Examples related to onclick

Examples related to global