CODEWITHSUNDEEP
javascriptdom-events
Aditya Shukla
Aditya Shukla

Reputation: 14235

Null element Javascript with display:none

I have created a page where element1.style.display='none' by default. Now I have another element, element2, which when clicked displays element1. But when trying to set the element1 to a function which sets element1.style.display="block" , it gives me an error saying element1 is null. I understand this is because display=none by default.

How can I solve this issue? This is using Javascript and not jQuery.

var hash = location.hash; 
alert(hash); 

function init() { 
    if( hash == '#menu-a' || hash == '' ) { 
        document.getElementById('menu-a').style.display = 'block';
    } 
    else if( hash == '#menu-b' ) { 
        document.getElementById('menu-b').style.display = 'block'; 
    }
    else { 
        document.getElementById('menu-c').style.display = 'block'; 
    } 
} 

window.onload=init;

Upvotes: 1

Views: 6806

Answers (6)

R S Muthu Kumaran
R S Muthu Kumaran

Reputation: 73

I suppose that you are changing the style of that element before even that element is generated in your html page. When you try to access some element in a webpage, if that element is not available in the page at that point of time, it returns Null My suggestion is to run that javascript part after those elements are loaded completely, by using attributes like, onclick, onload, etc...

Upvotes: 0

nhaggen
nhaggen

Reputation: 443

I was actaully having a similar problem: not all browsers treat Elements with display:none (or at least their children) the same way. I have some SVG Objects placed in two DIVs and I want to show either one or the other. During initialization I do some manipulations on the SVG Elements (change some text Elements inside the SVG). This worked perfectly with Firefox but failed with Opera, Chrome and IE. In these browsers Elements that were inside a div with display:none gave a null result when trying to get them with document.getElementById(myID). A first workaround was to set the display:none property only after initialization (this worked), but when I wanted to show them again all initialization was lost (text labels were all at their default). I think this proves that the content of a DIV with display:none is somehow cleared from the DOM, not simply hidden. I tried also to use visibility:hidden instead of display:none but this made a big mess with the page layout. The only solution that seems to work on all browsers is (so far) to place the DIV I want to hide in "outer-space" like it is suggested here...

position: absolute;
top: -9999px;
left: -9999px;

Upvotes: 0

Thevs
Thevs

Reputation: 3253

You should do display:block shortly when element is initialized, and then revert it to display:none right after initialization.

Upvotes: 0

Quentin
Quentin

Reputation: 943999

I understand this is because display=none by default

No. It is because nothing has been assigned to the variable.

I'm guessing you are expecting an element with id="element1" to automatically create a JavaScript variable called element1 — it shouldn't.

document.getElementById('element1').style.display = 'block';

Upvotes: 1

Ionuț Staicu
Ionuț Staicu

Reputation: 22184

There is any chance to have javascript triggered before dom ready? element1 exists in dom tree at the moment you want to access it?

Upvotes: 0

Cadoc
Cadoc

Reputation: 249

If the hidden element is always in the same order you could try accessing it with getElementsByTagName("")[arrayindex].

Upvotes: 0

Related Questions