Here's the HTML of my page. Skip the CSS its irrelevant I believe.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="vertical.js"></script>
<style type="text/css">
#navlist li
{
display: inline;
/* for IE5 and IE6 */
}
#navlist
{
width: 7em;
/* to display the list horizontaly */
font-family: sans-serif;
margin: 0 0 0 3em;
padding: 0;
border-top: 1px #000 solid;
border-left: 1px #000 solid;
border-right: 1px #000 solid;
}
#navlist a
{
width: 99.99%;
/* extend the sensible area to the maximum with IE5 */
display: block;
background-color: #fff;
border-bottom: 1px #000 solid;
text-align: center;
text-decoration: none;
color: #000;
}
#navlist a:hover { background-color: orange; }
#navlist a:visited { color: #000; }
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#tab1">Item one</a></li>
<li><a href="#tab2">Item two</a></li>
<li><a href="#tab3">Item three</a></li>
<li><a href="#tab4">Item four</a></li>
<li><a href="#tab5">Item five</a></li>
</ul>
<div id="tab1">tab1</div>
<div id="tab2">tab2</div>
<div id="tab3">tab3</div>
<div id="tab4">tab4</div>
<div id="tab5">tab5</div>
</div>
</body>
The content of vertical.js
function tabber() {
var li = document.getElementById("navcontainer");
var as = document.getElementById('navlist');
return;
}
window.onload = tabber();
When the tabber() function is executed the function call to document.getElementById returns null? Why? There definitely exists the element navcontainer. Any clues?