搜索div ID时Document.getelementbyId返回null

Question

I am currently trying to show two scroll bars, one at the top and one at the bottom of a ListView. However, my document.getelementbyid keeps returning null and I cant figure out why. I am also using a master page if that helps.

<script type="text/javascript">
    function DoubleScroll(element1) {
        var element = document.getElementById(element1);
        if (!element) return;
        var scrollbar = document.createElement('div');
        scrollbar.appendChild(document.createElement('div'));
        scrollbar.style.overflow = 'auto';
        scrollbar.style.overflowY = 'hidden';
        scrollbar.style.width = '500px';
        scrollbar.firstChild.style.width = element.scrollWidth + 'px';
        scrollbar.firstChild.style.paddingTop = '100px';
        scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
        scrollbar.onscroll = function () {
            element.scrollLeft = scrollbar.scrollLeft;
        };
        element.onscroll = function () {
            scrollbar.scrollLeft = element.scrollLeft;
        };
        element.parentNode.insertBefore(scrollbar, element);
    }


    DoubleScroll(document.getElementById('doublescroll'));
</script>

Here is the div id I am trying to reach:

<div id="doublescroll" style=" width: 100%; height: auto;">

Answer 1

You are calling document.getElementById twice: once in the function argument and again inside the function. Remove one of these and it should work.

Answer 2

PitaJ has one thing right, you are trying to use a DOM reference as an id. If you want it to be overloaded, you can always do a type check.

function DoubleScroll(element1) {
    var element = typeof element1 === "string" ? document.getElementById(element1) : element1;

Another problem might be the fact you are calling the element BEFORE it is rendered on the page. You can not reference an element before it exists.

Move the line DoubleScroll(document.getElementById('doublescroll')); to the bottom of the body, call it onload, or on document ready.

Answer 3

You are getting NULL because element1 is an object. When you call document.getElementById inside of the DoubleScroll function, is returns null because getElementById cannot accept an object as a parameter.

Here is how you should set element equal to element1:

        var element = element1;

You can find a working example here: http://jsfiddle.net/mtruty/Bx2JL/1/

All that being said, it is redundant to set element = element1. Why not just use the object you are passing in?

Hope this help!