document.getElementById is returning null
-
30-09-2019 - |
Question
Here's the relevant HTML:
<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>
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? The element navcontainer definitely exists. Any clues?
Solution
Heh, the devil is in the detail. You are making a mistake while assigning the onload
event.
window.onload = tabber();
will assign the result of tabber()
to the onload
property. Tabber() is executed straight away and not onload.
Change it to
window.onload = function() { tabber(); }
that will work.
OTHER TIPS
You're calling the tabber function incorrectly on window load.
Change it to
window.onload = tabber;
maybe the fact that you're using the JS keyword 'as' as a variable is the problem. remove that first.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow