473,703 Members | 4,345 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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


Imagine I've this block of HTML:
<p>Alex Schein Mailing List <input type="checkbox"
name="newslette rsToUse[]" value="133156"> (<a href="mcControl Panel.php"
onClick="hideOr ShowDivById('em ailList133156') ; return false;">See
emails?</a>)</p>
<form method="post" action="mcContr olPanel.php"
id="emailList13 3156" style="display: none;"><textare a
name="formInput s[cbModifier19]">na*******@son .org,
bi***********@h otmail.com, mj*********@yah oo.com,
jj****@yahoo.co m</textarea>
<input type="submit" value="Edit List">
<input type="hidden" name="choiceMad e"
value="standard Update">

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

and imagine I've this javascript function:

function hideOrShowDivBy Id(optionDivId) {
if (document.getEl ementById(optio nDivId)) {
var optionDiv = document.getEle mentById(option DivId);
if (optionDiv.styl e.display == 'block') {
optionDiv.style .display='none' ;
} else {
optionDiv.style .height='auto';
optionDiv.style .display='block ';
optionDiv.style .visibility='vi sible';
}
} 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?

Mar 11 '06 #1
2 9063
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="newslette rsToUse[]" value="133156"> (<a href="mcControl Panel.php"
onClick="hideOr ShowDivById('em ailList133156') ; 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.

)</p> <form method="post" action="mcContr olPanel.php"
id="emailList13 3156" style="display: none;"><textare a
name="formInput s[cbModifier19]">na*******@son .org,
bi***********@h otmail.com, mj*********@yah oo.com,
jj****@yahoo.co m</textarea>
<input type="submit" value="Edit List">
<input type="hidden" name="choiceMad e"
value="standard Update">

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

and imagine I've this javascript function:

function hideOrShowDivBy Id(optionDivId) {
if (document.getEl ementById(optio nDivId)) {
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.getEle mentById(option DivId);
if (optionDiv.styl e.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='vi sible';
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.getEl ementById(optio nDivId)) 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
--
remove blah to email me
Mar 11 '06 #2
Jake Barnes wrote:
Imagine I've this block of HTML:

[...]<a href="mcControl Panel.php"
onClick="hideOr ShowDivById('em ailList133156') ; return false;">See
emails?</a>[...]
<form method="post" action="mcContr olPanel.php"
id="emailList13 3156" style="display: none;">[...]
</form>

and imagine I've this javascript function:

function hideOrShowDivBy Id(optionDivId) {
if (document.getEl ementById(optio nDivId)) {
[...]
} 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::getEl ementById() 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.or g/>

D) The user agent does not support document.getEle mentById() 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
Mar 12 '06 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

13
40745
by: Dan R Brown | last post by:
I have a large form that is generated dynamically in a jsp using xml / xslt. So, to break up this form into several "tabbed" sections, I break up the form using <div> tags. Each <div style="display:none"> can be displayed by setting the style attribute to "display:", or hidden with "display:none". This gives the illusion that the person filling out the form is switching from page to page...without the overhead of extra hits on the server,...
1
2237
by: VK | last post by:
visibility:hidden vs display:none I guess I *feel* the difference (or maybe not) Could anyone put it in words for me?
3
2261
by: Erwin Moller | last post by:
Hi all, Situation: A (rather long) page that contains a lot of divs. Some are visible (display:inline) at a certain time, other not. The javascript is responsible for divs to be visible or not. Question:
6
29187
chunk1978
by: chunk1978 | last post by:
hi there... i'm about to embark on my very first PHP code journey (i've been saying that for a while... so sometime soon i hope... anyway)... before i begin my exciting new journey into PHP land, i would like to know if PHP will send hidden HTML form elements or not?... for example: if a user makes a selection in my HTML form that triggers my wonderfully dynamic HTML to set a DIV to STYLE="DISPLAY:NONE", is it possible to tell PHP not...
4
70089
by: gimme_this_gimme_that | last post by:
Hi, I have an onchange method for a select box that goes something like this (the select is in a form named aForm): function page_on_change() { pageElement = aForm.my_page_id; aForm.nav_page_name.value = pages.value]; var si = pageElement.selectedIndex;
15
3160
by: cssExp | last post by:
hello, Rather than going on a wild explanation on what's the the problem, it'll be much quicker and easier if i let you look at it yourself, so I'll post my page source (actual contents taken out, of course). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Language" content="en-us" />
4
1817
by: JonFSBrighton | last post by:
Hi there, I have recently joined this forum in the hope that someone could help me as I am going crazy! I have a form element within a hidden container, that uses the script.acluo.us SlideDown effect to slide down its container to reveal the form. The problem is that the form tags and attributes do not exist . . . . now I know this has something to do with style-display:none and that it removes it from the DOM . . . . . .but what ...
2
1546
hsriat
by: hsriat | last post by:
Maximum how many elements can be made hidden by giving STYLE={DISPLAY:NONE} in a single HTML file. Any restriction?... If it is there.. any way out as I want to make 110 rows with DISPLAY:NONE at a time..
2
19680
hsriat
by: hsriat | last post by:
All the elements which were set as style={display:none} are still being shown in Safari (Apple's Browser)... But when the same style is applied with javascript on an event, it hides the element. Like this... document.getElementById('abc').style.display='none'; This one is also not working: style="{background-image:url('/img/logo.png');background-repeat:no-repeat}" Both are working all good with Firefox, Opera and even IE 6 (which I...
0
8760
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8670
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
1
9017
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8967
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
5923
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4687
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3125
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2458
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2070
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.