why does document.getElementById(optionDivId) not find id of element that is clearly there

[Jake Barnes]

Imagine I have these two lines of HTML:

<p>Pick a list: (<a href="mcControlPanel.php"
onClick="hideOrShowDivById('newMailList'); return false;">Create New
List?</a>)</p>

<form id="newMailList" method="post" action="mcControlPanel.php">


Imagine I have this function:


function hideOrShowDivById(optionDivId) {
if (document.getElementById(optionDivId)) {
var optionDiv = document.getElementById(optionDivId);
if (optionDiv.style.display == 'block') {
optionDiv.style.display='none';
} else {
optionDiv.style.display='block';
}
} else {
alert("There was no item on the page called " + optionDivId);
}
}



Why would I get the error message ""There was no item on the page
called newMailList"

 

[Stephen Chalmers]

Imagine I have these two lines of HTML:

<p>Pick a list: (<a href="mcControlPanel.php"
onClick="hideOrShowDivById('newMailList'); return false;">Create New
List?</a>)</p>

<form id="newMailList" method="post" action="mcControlPanel.php">


Imagine I have this function:


function hideOrShowDivById(optionDivId) {
if (document.getElementById(optionDivId)) {
var optionDiv = document.getElementById(optionDivId);
if (optionDiv.style.display == 'block') optionDiv.style.display='none';
else

optionDiv.style.display='block';
}
else
alert("There was no item on the page called " + optionDivId);

}

Why would I get the error message ""There was no item on the page
called newMailList"

Have you checked the integrity of your HTML?
Ensure that all applicable elements have closing tags.

 

[RobG]

Imagine I have these two lines of HTML:

<p>Pick a list: (<a href="mcControlPanel.php"
onClick="hideOrShowDivById('newMailList'); return false;">Create New
List?</a>)</p>

<form id="newMailList" method="post" action="mcControlPanel.php">

Imagine I have this function:

function hideOrShowDivById(optionDivId) {
if (document.getElementById(optionDivId)) {
var optionDiv = document.getElementById(optionDivId);
if (optionDiv.style.display == 'block') {

In this example, optionDiv is a reference to a form element. Most
elements in the page inherit their display characteristics from a
default stylesheet, they are not contained in the element's style object.

This is easily fixed by modifying your script to:

if (optionDiv.style.display == '') {
optionDiv.style.display = 'none';
} else {
optionDiv.style.display = '';
}


or more concisely and with feature detection:

var o = optionDiv.style;
if (o){
o.display = ('' == o.display)? 'none' : '';
}

Now it will work with a wide variety of element types, regardless of
their default display attribute value.

There are many different values for the display attribute, hence it is
recommended to switch between '' and 'none' rather than some specific
value like 'block' or 'inline'. Setting it to '' allows it to return to
the default (or whatever it might have been set to by CSS).

<URL:http://www.w3.org/TR/CSS21/visuren.html#propdef-display>

[...]

Why would I get the error message ""There was no item on the page
called newMailList"

Because the call to optionDiv.style.display returns an empty string
(''), so the test:

if (optionDiv.style.display == 'block')

is always false.