So for some reason this unobtrusive javascript code is not working and I can't figure out for the life of me why it won't work.
I dynamically change the className of a div element and therefore I expect the CSS to reflect that change. However it doesn't. Here's the simplified code.
html:
<head>
<title>Your Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="us.js"></script>
</head>
<body>
<div id="wrapper">
<h1 id="title">Your Page</h1>
</div>
</body>
javascript:
window.onload = function() {
document.getElementById("wrapper").className = "2";
}
css:
#wrapper{
background-color: white;
}
#wrapper.1 {
background-color: black;
}
#wrapper.2 {
background-color: red;
}
#wrapper.3 {
background-color: blue;
}
I look at the wrapper div in firebug and it shows the class being changed to "2". However, the webpage doesn't reflect that by changing the background color to be red. (it doesn't work with changing text color either. I tried that.). I know the CSS is correctly loading. So what is the problem?