Changing html element property via javascript does not change appearance

Question

I have got a html page, with a navigation bar. Ideally, once user select one option, that option background image would change. However, I was not able to achieve that, by using javascript to dynamically change the list property.

The html:

<html>
<head>
<link href="includes/css/content.css" rel="stylesheet" type="text/css">
<script>
function select(id)
{
    alert(id);
    var list = document.getElementsByTagName('li');
    for(var i=0;i<list.length;i++)
    {
        list[i].class='random';
    }
    document.getElementById(id).class='selected';
}
</script>
</head>
<body>
<div id="mainContent">
            <div class = 'nav'>
                <ul>
                    <li class='selected' id='home' onClick="select(this.id)"><a href="#" ><span  style='color:gray'>Home</span></a></li>
                    <li id='system' onClick="select(this.id)"><a href="#" ><span  style='color:gray'>Systems</span></a></li>
                    <li id='temp' onClick="select(this.id)" ><a href="#"><span  style='color:gray'>Notification Template</span></a></li>

                </ul>
        </div>
</body>
</html>

And the css file looks like this:

.nav .selected a{
background-size:cover;
background: url(../images/nav.gif) no-repeat top;
color:white;
}

Is there something I am doing wrong here?

list[i].class='random'; should be list[i].className += ' random'; — Andy
– Andy, Commented Nov 28, 2012 at 18:04
Did .className fix your problem, or is it still not cooperating? — user1720624
– user1720624, Commented Nov 28, 2012 at 19:24

Kami · Accepted Answer · 2012-11-28 18:04:21Z

2

The property class does not exist for HTMLElement. Use className to set the css class.

For a full list of properties - see http://www.w3schools.com/jsref/dom_obj_all.asp

answered Nov 28, 2012 at 18:04

Kami

19.5k4 gold badges53 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user1720624 · Accepted Answer · 2012-11-28 18:04:13Z

1

If you're setting a class that way, you'll want to use .className [ https://developer.mozilla.org/en-US/docs/DOM/element.className ]

answered Nov 28, 2012 at 18:04

user1720624

Collectives™ on Stack Overflow

Changing html element property via javascript does not change appearance

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related