CODEWITHSUNDEEP
javascript
lrod408
lrod408

Reputation: 135

JavaScript Function working well on Firefox but not Chrome

I have a javascript function that changes color of nav bar on click of button. I used a validator and it returned no errors.I used the validator on both browsers. Here is the part of the code, any suggestions would be greatly 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 This 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 is 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>

Upvotes: 3

Views: 96

Answers (3)

6502
6502

Reputation: 114579

When you set a style attribute of an element (e.g. style.backgroundColor) to "lightblue" you cannot expect to read it back as "lightblue".

For example chrome returns "rgb(173, 216, 230)" instead.

You need to keep a variable to store the current state instead of relying on reading back style attributes.

Reading and writing attributes of style is not like accessing regular members of a Javascript object. Those operations are equivalent to calls to getPropertyValue and setProperty and you have no guarantees that the value you pass when setting will be the same that you get back when retrieving.

For example it's also possible that passing "rgb(1,2,3)" you get back "rgb(1, 2, 3)" (with spaces). This is moreover absolutely evident if you set an attribute to something invalid (you will never read something invalid out of a property).

If you need to store logical state in an HTML element you can use the data attributes that were introduced exactly for this usage.

In your specific case for example I'd write something like:

var color = "lightblue"; // Using a regular variable to 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;
}

Upvotes: 6

Magesh Kumaar
Magesh Kumaar

Reputation: 511

I donot believe this is the right way to do, but you can just replace the lightblue with rgb(173, 216, 230) for a quick solution

like this

function colorFunction(){
         var color3 = document.getElementById("demo").style.backgroundColor;
         var color2 = document.getElementById("demo2").style.backgroundColor;
         console.log(color2);
         var color  = document.getElementById("demo3").style.backgroundColor;

            if (color === "rgb(173, 216, 230)" && color2 === "rgb(173, 216, 230)" && color3 === "rgb(173, 216, 230)"){
                document.getElementById("demo").style.backgroundColor = "white";
                document.getElementById("demo2").style.backgroundColor = "white";
              document.getElementById("demo3").style.backgroundColor = "white";
        } else {
                document.getElementById("demo").style.backgroundColor = "rgb(173, 216, 230)";
            document.getElementById("demo2").style.backgroundColor = "rgb(173, 216, 230)";
            document.getElementById("demo3").style.backgroundColor = "rgb(173, 216, 230)";
           }
    }

Upvotes: 1

AndyD
AndyD

Reputation: 895

An alternative to using "style.backgroundColor" would be to use 

document.getElementById("demo").setAttribute("style", "background-color: lightblue";

That may yield a more reliable response.

Upvotes: 1

Related Questions