document.getElementById('xxx') showing null

Question

Here is my JS

var linkArray = {
    boothsizeDiv_link: false,
    furnishingsprovidedDiv_link: false,
    electricalDiv_link: false,
    rentalfurnishingsDiv_link: false,
    gesgraphicsDiv_link: false,
    geslaborDiv_link: false,
    contractorDiv_link: false,
    carpetingDiv_link: false,
    boothlightingDiv_link: false,
    javitsDiv_link: false,
    boothsealDiv_link: false,
    mannequinsDiv_link: false,
    calcDiv_link: false
};
for (var i in linkArray) {

    if (linkArray['boothsizeDiv_link'] == false) {

        document.getElementById('jumplinks').style.display = 'block';
        document.getElementById('boothsizeDiv_link').style.display = 'block';
    }
}

html is

<div id="jumplinks" align="left" style="display:none;">

 <div id="boothsizeDiv_link" style="display:none;"><a href="#" onclick="ToggleLinks('boothsizeDiv');"><font face="calibri">BOOTHSIZE</font></a></div>

</div>

And in my html file there is div with id jumplinks with style='display:none;' When I try to run the JS file, it is saying like document.getElementById('jumplinks') is null. What is the problem? Need help..

Why are you iterating through `linkArray`? You are not using any of its values or variables. — Amberlamps, Mar 14 '13 at 09:27
This jsfiddle http://jsfiddle.net/cchana/WDPms/2/ shows how position/timing of your javascript will affect things. — cchana, Mar 14 '13 at 09:38
One more thing how to find out length of the array 'linkArray'??? — Vamshi, Mar 14 '13 at 10:09

score 0 · Answer 1 · answered Mar 14 '13 at 16:28

As mentioned in the comments, you don't need to iterate through linkArray to find its length. Use linkArray.length to find the array length. Maybe:

console.log("linkArray length is: " + linkArray.length);

Concerning the null error, could you also tell us where you are calling the javascript? You could encompass the JS in a function in the head, and call that function from elsewhere. The following code also acts as a toggle, allowing you to hide the divs as well:

<script>

function togLinks() {
    if (linkArray['boothsizeDiv_link'] == false) {

        var jumplinks = document.getElementById('jumplinks');
        var boothsizeDiv_link = document.getElementById('boothsizeDiv_link');

        jumplinks.style.display = jumplinks.style.display == "block" ? "none" : "block";
        boothsizeDiv_link.style.display = boothsizeDiv_link.style.display == "block" ? "none" : "block";
    }
}

</script>

Calling toglinks:

<div onclick="togLinks()">show/hide links</div>

score -1 · Answer 2 · edited May 23 '17 at 12:21

-1

You should only execute Javascript afte the DOM has finished loading, so the above will only work after the document.ready event has fired. If you run your code in the <head> of a page, it is run before the element actually exists, and hence it is null.

Here's an example with plain Javascript for hooking into that event : $(document).ready equivalent without jQuery

edited May 23 '17 at 12:21

Community

1
1

answered Mar 14 '13 at 09:26

Nick Andriopoulos

9,260
6
28
55

See this fiddle: http://jsfiddle.net/WDPms/ is says the object is `null` as well, even though it is `undefined`. Depends on how you do your logging on what is reported (of course it's undefined, but functions as `alert` will report `null` and I don't know what he used to test his object). – Nick Andriopoulos Mar 14 '13 at 09:28

document.getElementById('xxx') showing null

2 Answers2