problem - myDiv.style.display='none' doesn't make anything invisible.

[Jake Barnes]

Imagine I've this block of HTML:


<p>Alex Schein Mailing List <input type="checkbox"
name="newslettersToUse[]" value="133156"> (<a href="mcControlPanel.php"
onClick="hideOrShowDivById('emailList133156'); return false;">See
emails?</a>)</p>
<form method="post" action="mcControlPanel.php"
id="emailList133156" style="display:none;"><textarea
name="formInputs[cbModifier19]">[email protected],
(e-mail address removed), (e-mail address removed),
(e-mail address removed)</textarea>
<input type="submit" value="Edit List">
<input type="hidden" name="choiceMade"
value="standardUpdate">

<input type="hidden" name="formInputs[cbId]"
value="133156">
</form>



and imagine I've this javascript 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.height='auto';
optionDiv.style.display='block';
optionDiv.style.visibility='visible';
}
} else {
alert("There was no item on the page called " + optionDivId);
}
}



Why would I keep getting the alert "There was no item on the page"?

The HTML block above is the first item in a list of 8. For some reason,
it is visible, despite display being set to "none". The other 7 items
are invisibile, as you'd expect. And the above Javascript function
works fine on the other 7 items.

What am I missing?

 

[Gérard Talbot]

Jake Barnes wrote :

Imagine I've this block of HTML:

Providing an url where a webpage can be examined, tested (markup
validation, http headers, mime type supported, CSS validation, etc.)
conveniently with tools, verified is a lot more convenient for all
parties involved. Here, we don't see all of possible code and we have to
"imagine" or create a page ourselves.

<p>Alex Schein Mailing List <input type="checkbox"
name="newslettersToUse[]" value="133156"> (<a href="mcControlPanel.php"
onClick="hideOrShowDivById('emailList133156'); return false;">See
emails?</a>

If javascript support is disabled or inexistent, will your code still
work? If not, then you should make it a button and not a link. Even if
javascript support is active, enabled, semantically speaking, I think
you should be using a button, not a link since the button will toggle
the display of a form.

<form method="post" action="mcControlPanel.php"
id="emailList133156" style="display:none;"><textarea
name="formInputs[cbModifier19]">[email protected],
(e-mail address removed), (e-mail address removed),
(e-mail address removed)</textarea>
<input type="submit" value="Edit List">
<input type="hidden" name="choiceMade"
value="standardUpdate">

<input type="hidden" name="formInputs[cbId]"
value="133156">
</form>



and imagine I've this javascript function:



function hideOrShowDivById(optionDivId) {
if (document.getElementById(optionDivId)) {

If the id of the element passed is a form element, then it's easier to
follow your code and imagine what is happening by naming that parameter
something like FormId or strFormId, not optionDivId.

var optionDiv = document.getElementById(optionDivId);
if (optionDiv.style.display == 'block') {
optionDiv.style.display='none';
} else {
optionDiv.style.height='auto';

This is unneeded. The default height value of a form is auto. Unless, of
course, it was modified by code we don't see here.

optionDiv.style.display='block';
optionDiv.style.visibility='visible';

Default value of CSS property visibility is visible. So, that
instruction is unneeded, unless, again, we don't see all the code and
visibility was changed somewhere else.

}
} else {
alert("There was no item on the page called " + optionDivId);
}
}



Why would I keep getting the alert "There was no item on the page"?

I don't know. One thing is clear: it means your script fails at the
external if..else:
if (document.getElementById(optionDivId)) fails.

The HTML block above is the first item in a list of 8. For some reason,
it is visible, despite display being set to "none". The other 7 items
are invisibile, as you'd expect. And the above Javascript function
works fine on the other 7 items.

What am I missing?

You are missing an url to allow us to examine the whole page for sure.
You *_first_* have to make sure your markup code validates when trying
to debug those problems.
In strict DTD, you will need to wrap the textarea within a block-level
element, like a <p> or a <div>.

Gérard

 

[Thomas 'PointedEars' Lahn]

Imagine I've this block of HTML:

[...]<a href="mcControlPanel.php"
onClick="hideOrShowDivById('emailList133156'); return false;">See
emails?</a>[...]
<form method="post" action="mcControlPanel.php"
id="emailList133156" style="display:none;">[...]
</form>

and imagine I've this javascript function:

function hideOrShowDivById(optionDivId) {
if (document.getElementById(optionDivId)) {
[...]
} else {
alert("There was no item on the page called " + optionDivId);
}
}

Why would I keep getting the alert "There was no item on the page"?

A) The function is called before the quoted markup was parsed or rendered.

Since the stylesheet display:none means that the element should "generate
no boxes in the formatting structure" (CSS2, 9.2.5), it is possible that
this does not happen before it is showed once. That the corresponding
element object would not be available in the DOM then would be somewhat
peculiar, though.

I would suggest that you hide the `form' element with CSS scripting in
the first place anyway, because without client-side script support, but
with CSS support, users will see nothing here.

B) There is more than one `form' element with that ID in that document.
IDs must be unique throughout a document. A conforming implementation
of W3C DOM Level 2's Document::getElementById() is allowed to return
an undefined value if there is more than one element with the same ID.
So that value can be a false-value, for example `undefined' or `false'.

C) The user agent does not support the `id' attribute for `form' elements,
maybe because of other invalid markup. <URL:http://validator.w3.org/>

D) The user agent does not support document.getElementById() properly,
therefore a false-value is returned.

E) The user agent is borken.


Indent code using multiples of two Space characters, not the Horizontal Tab
character. Do not let code exceed the 80-columns limit, especially when
posting it to a newsgroup; 72 or 76 are good numbers.


PointedEars