469,336 Members | 5,527 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,336 developers. It's quick & easy.

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 1404
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
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.