javascript - Hexadecimal colors do not work on target style backgroundColor -
- i posted previous question , responded code:
html:
<table class="bingo"> <tr> <td id="square0"></td> <td id="square1"></td> <td id="square2"></td> </tr> <tr> <td id="square3"></td> <td id="square4"></td> <td id="square5"></td> </tr> <tr> <td id="square6"></td> <td id="square7"></td> <td id="square8"></td> </tr> </table> js:
var togglehighlight = function (e) { var bg = e.target.style.backgroundcolor; if (bg == 'red') { e.target.style.backgroundcolor = ''; } else { e.target.style.backgroundcolor = 'red'; } } var preparetable = function () { var cells = document.getelementsbytagname("td"); (var = 0 ; < cells.length ; i++) { cells[i].onclick = function(event) { togglehighlight(event); } } } document.onload = preparetable(); the code above demonstrated here: http://jsfiddle.net/nyzswnx2/47/
however, when changed red #cecece, , able click on each cell turns cell white light gray. however, when click light gray cell again, won't turn cell light gray white. how fix that?
http://jsfiddle.net/re006/nyzswnx2/82/
// e parameter var togglehighlight = function (e) { var bg = e.target.style.backgroundcolor; if (bg == "#cecece") { e.target.style.backgroundcolor = "#fff"; } else { e.target.style.backgroundcolor = "#cecece"; } } /* getting list "td" return list, need loop store cells passes event argument */ var preparetable = function () { var cells = document.getelementsbytagname("td"); (var = 0 ; < cells.length ; i++) { cells[i].onclick = function(event) { togglehighlight(event); } } } //calls function document.onload = preparetable();
var bg = e.target.style.backgroundcolor; backgroundcolor being returned rgb , not hex. value of bg rgb(206, 206, 206), not #cecece
you can try comparing rgb string instead or converting value hex first.
if (bg == "rgb(206, 206, 206)") {
Comments
Post a Comment