JavaScript Function working well on Firefox but not Chrome -
i have javascript function changes color of nav bar on click of button. used validator , returned no errors.i used validator on both browsers. here part of code, suggestions appreciated.
<body class ="backgroundtwo"> <h1 class ="centered sansserif background" >hello world!</h1> <div> <ul class ="center"> <li class ="center"><a id="demo" class ="center" href="about.html" >about site</a></li> <li class ="center"><a id ="demo2" class="center" href="current.html">current work</a></li> <li class ="center"><a id ="demo3" class="center" href="http://www.dallascowboys.com/">cowboys</a><li> </ul> </div> <h1 class = "centered" > <img src ="image.jpg" alt = "cowboys" style="width:304px;height:228px;"></h1> <p class = "centered sansseriftwo" >this lrodrig6's csc412 website project</p> <div class ="wrapper"> <button class="button" onclick="colorfunction()">click me</button> </div> <script> function colorfunction(){ var color3 = document.getelementbyid("demo").style.backgroundcolor; var color2 = document.getelementbyid("demo2").style.backgroundcolor; var color = document.getelementbyid("demo3").style.backgroundcolor; if (color === "lightblue" && color2 === "lightblue" && color3 === "lightblue"){ document.getelementbyid("demo").style.backgroundcolor = "white"; document.getelementbyid("demo2").style.backgroundcolor = "white"; document.getelementbyid("demo3").style.backgroundcolor = "white"; } else { document.getelementbyid("demo").style.backgroundcolor = "lightblue"; document.getelementbyid("demo2").style.backgroundcolor = "lightblue"; document.getelementbyid("demo3").style.backgroundcolor = "lightblue"; } } </script> </body> </html>
when set style attribute of element (e.g. style.backgroundcolor) "lightblue" cannot expect read "lightblue".
for example chrome returns "rgb(173, 216, 230)" instead.
you need keep variable store current state instead of relying on reading style attributes.
reading , writing attributes of style not accessing regular members of javascript object. operations equivalent calls getpropertyvalue , setproperty , have no guarantees value pass when setting same when retrieving.
for example it's possible passing "rgb(1,2,3)" "rgb(1, 2, 3)" (with spaces). absolutely evident if set attribute invalid (you never read invalid out of property).
if need store logical state in html element can use data attributes introduced usage.
in specific case example i'd write like:
var color = "lightblue"; // using regular variable store status function colorfunction(){ // toggle color color = (color === "lightblue") ? "white" : "lightblue"; document.getelementbyid("demo").style.backgroundcolor = color; document.getelementbyid("demo2").style.backgroundcolor = color; document.getelementbyid("demo3").style.backgroundcolor = color; } 
Comments
Post a Comment