Color changing working on Firefox but not IE or Chrome

Question

I am having the hardest time figuring out why this will not work on chrome or IE but works great in firefox. Essentially I have a nav bar that I was highlighting the link that was clicked on until another link was clicked

Here is my JS function:

function updateObjectIframe(which){
    document.getElementById('one').innerHTML = '<'+'object id="foo" style="height:100%;width:100%;" name="foo" type="text/html" data="'+which.href+'"><\/object>';
    var Elements = document.getElementsByClassName('button');
    Array.prototype.filter.call(Elements, function(Element){
       Element.style = "background: #F0E68C;color: black;";
    });
    which.style = "background: #333; color: #fff;";
} 

My nav bar looks like the following. The pages get loaded into the the id "one".

<div id="menu">
    <ul>
        <li><a class="button" href="#" onclick="updateObjectIframe(this); return false;">TEST</a></li>
        <li><a class="button" href="#" onclick="updateObjectIframe(this); return false;">TEST</a></li>
        <li><a class="button" href="#" onclick="updateObjectIframe(this); return false;">TEST</a></li>
    </ul>
</div>

<div id="one" style="height:95%;width:100%;">
    <object id="foo" name="foo">

    </object>
</div>

Any help would be greatly appreciated.

Answer 1

I would try rewriting this using normal JavaScript techniques. You're always safest if you avoid anything clever. The following has the expected (or what I infer to be the expected) visual effect in Chrome and IE9. Your odd looping construct worked in both of them, but the conventional for loop is more clear. What failed was assigning a string to the style property. That looks to be a non-portable Firefox extension.

function updateObjectIframe(which){
    document.getElementById('one').innerHTML = '<'+'object id="foo" style="height:100%;width:100%;" name="foo" type="text/html" data="'+which.href+'"><\/object>';
    var elements = document.getElementsByClassName('button');
    for ( var i = 0; i < elements.length; ++i ) {
         var element = elements[i];
         element.style.background = '#F0E68C'
         element.style.color = 'black';
    }
    which.style.background = '#333';
    which.style.color = '#fff';
} 

UPDATE

document.getElementsByClassName() appears not to have been supported by IE prior to IE9. And that's why everybody loves jQuery so much.

Also, a somewhat cleaner and definitely more hip way to do this might be to set up two CSS styles in a style tag: One for the "active" button, one for "inactive" buttons. Then you'd change the elements' className properties, and use a different way to collect the "button" elements (because they'll have different classes now, and getElementsByClassName is non-portable too):

<script language="JavaScript">
    function updateObjectIframe(which){
        document.getElementById('one').innerHTML = '<'+'object id="foo" style="height:100%;width:100%;" name="foo" type="text/html" data="'+which.href+'"><\/object>';
        var elements = menu.getElementsByTagName('a');
        for ( var i = 0; i < elements.length; ++i ) {
            elements[i].className = 'button';
        }
        which.className = 'selected-button';
    } 
</script>
<style type="text/css">
#menu a.button{
    background-color: #F0E68C;
    color: black;
}
#menu a.selected-button
{
    background-color: #333;
    color: #fff;
}
</style>

Answer 2

You need to set the individual components of the style when changing it in javascript. Like this:

...
Element.style.background = "#F0E68C";
Element.style.color = "black";
...
which.style.background = "#333"
which.style.color = "#fff";
...

Answer 3

just use something like so:

onlick="$(".classWhichAllYourLinksHave").style("background","WhatEverYouUse")this.style = "background: #F0E68C;color: black;"" 

instead of

onclick="updateObjectIframe(this); return false;" 

or call a function