471,852 Members | 939 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,852 software developers and data experts.

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


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"

May 23 '06 #1
2 1465
Jake Barnes wrote:
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.

May 23 '06 #2
Jake Barnes wrote:
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.
--
Rob
Group FAQ: <URL:http://www.jibbering.com/faq/>
May 24 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Tor Hovland | last post: by
1 post views Thread by Andy Fish | last post: by
9 posts views Thread by s_m_b | last post: by
10 posts views Thread by b.dam | last post: by
3 posts views Thread by Franck | last post: by
4 posts views Thread by Miroslav Stampar [MCSD.NET / Security+] | last post: by
NeoPa
reply views Thread by NeoPa | last post: by
reply views Thread by YellowAndGreen | last post: by
aboka
reply views Thread by aboka | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.