-1

I want to change the coilor of a button on mouse click from white to red then from red back to white if click again. I tried like this:

<script language="JavaScript">
<!--
function changecolor(Id){
var series = "0";

var a = window.getComputedStyle(document.getElementById(Id)).backgroundColor;

var b = 2
if (a == "#FF4F4F") {
    b = 1
}

if (b == 1) {
    document.getElementById(Id).style.backgroundColor = "#FFFFFF";
}

if (b == 2) {
    document.getElementById(Id).style.backgroundColor = "#FF4F4F";
}

}   
//-->
</script>

It won't work. This will make the button go red in mozilla, chrome but it won't click back to white. IE says "error in page". The button HTML code is:

<input type = "button" Id = "01" value="01" onClick="changecolor('01')">

Something missing from my CSS styles. It looks like the first read (of the colour) is a null value but it does makes the button go red -in the two browsers- the way this function of mine is constructed. Then it looks like the if condition is not working properly, to see the red and make it white.

Peter O.
  • 32,158
  • 14
  • 82
  • 96
gambino
  • 1
  • 1
  • Your button code is missing, providing that would help us better understand what's going wrong. –  Sep 09 '14 at 22:40
  • Why have you got HTML comments inside of your script element? And have you tried `console.log(a)`? I'm betting that what you get back bears no relation to the hex-colours you're testing for. – David Thomas Sep 09 '14 at 22:42
  • This post relates to a similar one http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb – Mic1780 Sep 09 '14 at 22:49
  • @DavidThomas The HTML comments inside of script elements dates back to the era of IE 2.0/3.0 when JavaScript first came out and the contents of `script` elements was shown. They haven't been needed in 20+ years, but they show up in cargo-cult programming. – Jeremy J Starcher Sep 09 '14 at 22:51
  • The language attribute for script elements was deprecated in HTML 4 over 15 years ago, it's removed in HTML5. HTML comment delimiters in script elements haven't been necessary for even longer. – RobG Sep 09 '14 at 23:05

1 Answers1

1

The computed style of a background colour is of the format rgb(###, ###, ###) (or variations thereof, such as different whitespace or rgba) Therefore comparing with #xxxxxx will not work.

Since you're assigning to style.backgroundColor, you can simply read back:

var elem = document.getElementById(Id);
if( elem.style.backgroundColor == "#FF4F4F") {
    elem.style.backgroundColor = "#FFFFFF";
}
else {
    elem.style.backgroundColor = "#FF4F4F";
}

Feel free to switch the cases around as needed (based on how it should change the first time), but this will work because the browser will keep whatever you assigned to it.

However, in general, you should have a more reliable toggle:

var elem = document.getElementById(Id);
if( elem._toggle) {
    elem.style.backgroundColor = "#FFFFFF";
}
else {
    elem.style.backgroundColor = "#FF4F4F";
}
elem._toggle = !elem._toggle;

This will toggle reliably.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • 1
    It would be much better to add and remove a class that changes the style so that the vagaries of setting and getting colour values are avoided. – RobG Sep 09 '14 at 23:09