Question

I have this portion of code which is intended to changed the color of input button every time I click it.

function colorchange(id) 
 {
   if(document.getElementById(id).style.background == '#FFFFFF')
  {
   document.getElementById(id).style.background = '#000000';
  }
 else
  {
   document.getElementById(id).style.background = '#FFFFFF';
  }
 }

<input type="button" id="k777" onclick="colorchange('k777');" style="background:#000000;"/>

However this does not work properly.
It does change the color of the button from #000000 to #FFFFFF the first time I click it, but when I click it again it does not change back to #000000. It’s still white.
How do I fix this?

Answer 1

That’s because element.style.background returns values in the rgb format. Change your conditional if statement to check for the appropriate rgb values, and it should work fine.

Make that line this:

if(document.getElementById(id).style.background !== 'rgb(0, 0, 0)')

Demo, with your code fixed and cleaned up