Problems toggling style.display values

Gunnar

Hello, I am running into problems with a simple function which should
change the style.display properties from 'block' to 'none'. I am able
to change them from 'none' to 'block' as expected.

Any suggestions are appreciated.

The javascript:

function toggleTable(id) {
var allTables = document.getEle mentsByTagName( 'table');

for(var iCount=1; iCount < allTables.lengt h + 1; iCount++){
document.getEle mentById(id).st yle.display = "none"; // turn all
tables off
}

document.getEle mentById(id).st yle.display = "block"; //then simply turn
on the passed table id
}

The body:
<a onclick="toggle Table('table_1' )">Press me</a>

<table border="1" cellpadding="0" cellspacing="0"
style="border-collapse: collapse; display: none" bordercolor="#1 11111"
width="100%" id="table_1">
<tr>
<td width="50%">Tes t</td>
<td width="50%">Tes t</td>
</tr>
</table>

Oct 27 '05 #1

Subscribe Reply

5558

Mick White

Gunnar wrote:

Hello, I am running into problems with a simple function which should
change the style.display properties from 'block' to 'none'. I am able
to change them from 'none' to 'block' as expected.

Any suggestions are appreciated.

The javascript:

function toggleTable(id) {
var allTables = document.getEle mentsByTagName( 'table');

for(var iCount=1; iCount < allTables.lengt h + 1; iCount++){
for(var iCount=0; iCount < allTables.lengt h; iCount++){
document.getEle mentById(id).st yle.display = "none"; // turn all
tables off
}
allTables[iCount].style.display = "none"; // turn all tables off
}

document.getEle mentById(id).st yle.display = "block"; //then simply turn
on the passed table id
}
document.getEle mentById(id).st yle.display = "";
//turn on the passed table id
}

Mick

The body:
<a onclick="toggle Table('table_1' )">Press me</a>

<table border="1" cellpadding="0" cellspacing="0"
style="border-collapse: collapse; display: none" bordercolor="#1 11111"
width="100%" id="table_1">
<tr>
<td width="50%">Tes t</td>
<td width="50%">Tes t</td>
</tr>
</table>

Oct 27 '05 #2

Gunnar

Thank you for your kind suggestions. I must be missing something
simple as the following html should turn off both tables then turn on
table_1. The alert shows that the function is being called correctly,
but the tables are both still visible. Any other suggestions? Thanks
in advance!

<html>
<head>

<script type="text/javascript">

function toggleTable(id) {
var allTables = document.getEle mentsByTagName( 'table');

for(var iCount=0; iCount < allTables.lengt h; iCount++){
allTables[iCount].style.display == 'none';
}

document.getEle mentById(id).st yle.display == "";

alert(id +' should be the only one visible now');
}
</script>

</head>

<body>

<a onclick="toggle Table('table_1' )">Press here to call toggleTable
function</a>

<table border="1" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#1 11111" width="100%"
id="table_1">
<tr>
<td width="50%">Tab le 1</td>
<td width="50%">Tab le 1</td>
</tr>
</table>

<table border="1" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#1 11111" width="100%"
id="table_2">
<tr>
<td width="50%">Tab le 2</td>
<td width="50%">Tab le 2</td>
</tr>
</table>

</body>

</html>

Oct 27 '05 #3

Julian Turner

Gunnar wrote:

[snip]

allTables[iCount].style.display == 'none';
"==" is a comparison operator. It should be "=" (the assignment
operator).

[snip] document.getEle mentById(id).st yle.display == "";

Ditto

Julian

Oct 27 '05 #4

Evertjan.

Gunnar wrote on 27 okt 2005 in comp.lang.javas cript:

<script type="text/javascript">

function toggleTable(id) {
var allTables = document.getEle mentsByTagName( 'table');

for(var iCount=0; iCount < allTables.lengt h; iCount++){
allTables[iCount].style.display == 'none';
allTables[iCount].style.display = 'none';
}

document.getEle mentById(id).st yle.display == "";
document.getEle mentById(id).st yle.display = "";

alert(id +' should be the only one visible now');
}
</script>

[..]
--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Oct 27 '05 #5

Evertjan.

Evertjan. wrote on 27 okt 2005 in comp.lang.javas cript:

Gunnar wrote on 27 okt 2005 in comp.lang.javas cript:
<script type="text/javascript">

function toggleTable(id) {
var allTables = document.getEle mentsByTagName( 'table');

Why not do it with className and for(i in ...)?

<style>
..t {display:none;}
</style>

<script type="text/javascript">
function toggleTable(id) {
var tables = document.getEle mentsByTagName( 'table');
for(i in tables) tables[i].className = 't';
document.getEle mentById(id).cl assName = '';
}
</script>
<a onclick="toggle Table('table1') ">
Press here</a>

<table id="table1">
<tr>
<td>Table 1</td><td>Table 1</td>
</tr>
</table>

<table id="table2">
<tr>
<td>Table 2</td><td>Table 2</td>
</tr>
</table>

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Oct 27 '05 #6

Evertjan.

Evertjan. wrote on 27 okt 2005 in comp.lang.javas cript:

<script type="text/javascript">
function toggleTable(id) {
var tables = document.getEle mentsByTagName( 'table');
for(i in tables) tables[i].className = 't';
document.getEle mentById(id).cl assName = '';
}
</script>

Even nicer, IMHO:

function toggleTable(id) {
var tables = document.getEle mentsByTagName( 'table');
for(i in tables)
tables[i].className = (tables[i].id!=id)?'t':'' ;
}

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Oct 27 '05 #7

Michael Winter

On 27/10/2005 17:23, Evertjan. wrote:

[Iterating HTMLCollection]

Why not do it with className and for(i in ...)?

Just how thoroughly did you test that idea?

In IE, the length property of the collection is enumerated, in addition
to the Node properties. In Fx, the item and namedItem properties are
also enumerated.

Only built-in objects have their enumeration behaviour specified. Host
objects are free to respond any way they like, from enumerating nothing,
to everything.

Using indices is (always?) preferable when it achieves the intended goal.

[snip]

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

Oct 27 '05 #8

Gunnar

Thank you so much for your guidance!

Oct 27 '05 #9

Matt Kruse

Evertjan. wrote:

function toggleTable(id) {
var tables = document.getEle mentsByTagName( 'table');
for(i in tables) tables[i].className = 't';
document.getEle mentById(id).cl assName = '';
}

Setting a classname on a table is much slower than setting individual
attributes, since the browser needs to re-compute all the nested tags'
styles. It may or may not be the best route, depending on the situation.
Even nicer, IMHO:
function toggleTable(id) {
var tables = document.getEle mentsByTagName( 'table');
for(i in tables)
tables[i].className = (tables[i].id!=id)?'t':'' ;
}

Unless you are confident that your markup will never change, setting the
value of className should be avoided, IMO. You should always add a classname
from the space-separated list or remove it. That way, if your table has a
class of "data" it would become "data t" rather than losing the "data" class
entirely. Then the code becomes more portable and generalized.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

Oct 27 '05 #10

Similar topics

1621

Problems with WYSIWYG.

by: Christopher Brandsdal | last post by:

Hi! I have a anoying problem with my editor! What i want to do is make a popup that holds a string for the "hyperlink" window... I have a popup to do this before, and it works perfecty, but in order to make it work, I have to know the adress of the box I wanna put the value back in to... I have this so far :)

ASP / Active Server Pages

40778

Problems with form elements that are hidden with <div style="display:none">

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,...

Javascript

3007

cssui proposal [originally submitted to www-style] legend & fieldset

by: Anne van Kesteren | last post by:

Ok, here it goes. Originally I submitted this proposal to www-style. Since I don't get feedback there, I think I missed a few (maybe a lot) of points. Proposal: <http://lists.w3.org/Archives/Public/www-style/2003Nov/0096.html> (for some strange reason I can't post to that list myself) The first point I missed was of course that CSS3UI is not planning to do anything with FIELDSET and LEGEND

HTML / CSS

3166

Problems with adding dynamic rows to table

by: daveland | last post by:

I am working on some JavaScript that dynamically adds rows to a table in response to a button click. A new row does appear on the screen when the button is clicked. However, that table to which a row has been added is itself contained within an outer table (to handle the desired screen layout). That outer table does not properly grow to contain the new size of the table to which the row was added. (More specifically, I have...

Javascript

3570

Determining current state of style.display and toggling it

by: Tristan Miller | last post by:

Greetings. I am trying to write a function which toggles the display of a certain class of <div> elements in an HTML page. The CSS file initially sets some classes to "display: none", and others to "display: block". The problem I am encountering is that when the JavaScript interpreter starts up initially, all style.displays are null. Thus the following code is not effective: function toggleAll(itemname) {

Javascript

1238

Toggling a string

by: Dr John Stockton | last post by:

I see, quite often, code like if (tmp.style.display == 'none') tmp.style.display = 'block'; else if (tmp.style.display == 'block') tmp.style.display = 'none'; or if (tmp.style.display == 'none') tmp.style.display = 'block';

Javascript

4956

Ajax -> javascript edit box display problems - please help

by: Bob | last post by:

Hi, Hope you can help me with this one. I'm at my wits end. I'm trying to create an intelligent edit-box like the excellent "Customer" one at the URL: http://munich.schwarz-interactive.de/autocomplete.aspx

Javascript

2259

CSS problems with IE

by: mikeinspain | last post by:

Hi Guys.. Hope someone can help. I have a problem with a particular page on one of the sites I am developing. The page is here: http://tagwealth.co.uk/contact/. The pages renders fine in Safari and Firefox, but it gets shunted to the left of the screen in IE. The CSS for the page is below.. /******************************************** HTML ELEMENTS

HTML / CSS

2136

Form to run a JS Mandatory check before toggling <div> tag..

by: plumba | last post by:

Let me explain.... I have a form (most of which you guys have helped me with!!). The initial problem I was having is that it was holding the data in the fields after submit, I resolved this by putting the whole form in a set of <div> tags and the form now collapses after they click submit. Perfect!! But, have set some mandatory fields using java, and I need to it validate the these fields before it collapses the form - otherwise it says...

Javascript

9721

What is ONU?

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...

General

9601

Changing the language in Windows 10

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,...

Windows Server

10637

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10376

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

10115

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

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...

General

9199

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

7660

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

3861

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

3014

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

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...

General