Creating a simple toggle function

[guttyguppy]

Hi, first post here!

I'm doing an art project and having trouble. I want a div's background color to turn black if it's white, and white if it's black. Here's my code:

function toggle(obj) {
	var el = document.getElementById(obj);
	el.style.backgroundColor = (el.style.backgroundColor != 'rgb(0,0,0)' ? 'rgb(0,0,0)' : 'rgb(255,255,255)' );
}

<div id="a8" onClick="toggle('a8');"></div>

The box turns black, but doesn't return to white when it's clicked again. What am I doing wrong? Thanks for any advice.

 

[trollacious]

The rgb string returned in Firefox has spaces after the commas, but in IE it isn't. You're comparing exact strings, not numbers here, so will have to adjust your code appropriately to handle both formats.

This works for me:

function toggle(obj)
{
var el = document.getElementById(obj);
var bgcolor = el.style.backgroundColor.replace(/ /g, '');

if (bgcolor != 'rgb(0,0,0)')
  {

  el.style.backgroundColor = 'rgb(0, 0, 0)';
  }
else
  {
  el.style.backgroundColor = 'rgb(255, 255, 255)';
  }
}

Lee

 

[guttyguppy]

Thanks, that did the trick, much appreciated!