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?