Menu
I have been working on a small aspect of my application today and wanted to get a sliding bar on my application. I asked a question this morning where there was some good answers. I have recently wanted to try and answer that i ws given using Script, CSS and HTML.
I am getting to problem to get the Script working as it keeps coming up with an error saying:
0x800a138f - JavaScript runtime error: Unable to get property 'addEventListener' of undefined or null reference
This is the Script:
<script type="text/javascript">
var desktops = document.querySelectorAll('.desktop');
function hide(element) {
element.style.setProperty('left', '-100%', element.style.getPropertyPriority('left'));
}
function hideAll() {
for (var i = 0; i < desktops.length; i++) {
hide(desktops[i]);
}
}
function show(element) {
element.style.setProperty('left', '0', element.style.getPropertyPriority('left'));
}
document.getElementById('link-one').addEventListener('click', function () {
hideAll();
show(document.getElementById('one'));
}, false);
show(document.getElementById('one'));
</script>
Here is the HTML:
<ul>
<li id="link-one">
<div>1</div>
<div>One</div>
</li>
</ul>
<div id="one" class="desktop">
<h1>Sidebar Example</h1>
<p>This is 1</p>
<p>Something here.</p>
</div>
From what I can work out its not being able to find the ID?
856
The problem is that you're running the script BEFORE the elements on the page have been created. That is why the getElementById is returning null.
There are several ways to get around this...
<body><body onload="newFunction();">$(function() { ... });
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
