Manipulating properties of multiple span tags

**davidcholley** · 06-23-2003 10:18 AM

Is there a way to use JavaScript to change the style for both of the following <span> tags from display:none to dispaly:block? I can hangle the JavaScript to change 1 of the tags, however I would like to change both at the same time. If I need to uniquely identify each address (ex: id="address1", id="address2", etc.), how would I loop through them? ***NOTE: I cannot predict the number of addresses displayed. This will be used on a search results page.***

David C. Holley
<span id="address" style="display:none">
P.O. Box 123
Atlanta, GA 12345
</span>

Chris Ekhart
<span id="address" style="display:none">
1233 Main Street
Hometown, MA 12345
</span>

**Khalid Ali** · 06-23-2003 10:30 AM

document.getElementById("address").style.display="block";

**davidcholley** · 06-23-2003 10:55 AM

I've got that portion of it, however the code only alters the FIRST <span> tag. I'm dealing with MULTIPLE <span> tags and need to manipulate ALL of them in batch.

**Vladdy** · 06-23-2003 11:00 AM

First of all <span> is a generic inline element. If you assign display property block to it , use <div> instead. Anyway, here is the fastest way to accomplish the task:

<style>
.showspans span
{ display: block;
}
.hidespans span
{ display: none;
}
</style>

<script>
function showSpans(show)
{ document.getElementById('spanParent').className=show?'showspans':'hidespans';
}
<div  id="spanParent" class="hidespans">
David C. Holley
<span>
P.O. Box 123
Atlanta, GA 12345
</span>

Chris Ekhart
<span>
1233 Main Street
Hometown, MA 12345
</span>
</div>

When you have to change properties of multiple elements, much faster to do it through their parent.

**davidcholley** · 06-23-2003 11:06 AM

So technically, I'm not changing the actually <span> tags, just the <div> tags. Since the <div> is the parent to the <span> the changes cascades down.

David H

**Vladdy** · 06-23-2003 12:07 PM

That's why style sheets are cascading

**davidcholley** · 06-23-2003 03:56 PM

My adaptation of your example isn't working...

function showAddressClick()
{
if (document.getElementById('showAddressesCheckBox').checked == true)
{
document.getElementById('searchResults').className="locationAddressShow";
}
else
{
document.getElementById('searchResults').className="locationAddressHide";
}
}

</script>

<html>
.
.
.

<div id="searchResults"><tr><td width = "392" bgcolor="#000066" bordercolor = "#000066"><span class="contentSectionHeaderLight">Dinner Shows</span></td></tr><tr style="cursor

ointer;cursor:hand">
<td width = "392" colspan = "3" bgcolor=#FFFFFF bordercolor = #FFFFFF>
Location Name</td></tr>
</div></table>

.
.
.
</html>

CSS
span.locationAddressShow
{
font-family: MS Sans Serif,Tahoma, Arial,Garamond, Times New Roman, Helvetica, Tahoma;
font-size: 8pt;
font-style: normal;
display: block
}

span.locationAddressHide
{
font-family: MS Sans Serif,Tahoma, Arial,Garamond, Times New Roman, Helvetica, Tahoma;
font-size: 8pt;
font-style: normal;
display: none
}

**Vladdy** · 06-23-2003 05:13 PM

you did not adapt it right, compare css declarations:
mine:
.someClass span - defines the style of all children of .someClass
yours:
span.someclass - defines the style of span element with class .someClass.

Also, your incorrect HTML markup could be a problem once you correct that: <tr> can not be a child of <div>
run your file through validator.

**gil davis** · 06-23-2003 07:05 PM

Originally posted by Khalid Ali:
document.getElementById("address").style.display="block";

An "ID" has to be unique - only one object can have a given "ID". The getElementById() will only find the first one, because it isn't supposed to look for any more.

**davidcholley** · 06-23-2003 09:40 PM

If <tr> can't be a child of <div>, how then do I format the table?
...
To workaround the problem, I suppose that I could resubmit the page each time the Show Address Checkbox is checked/unchecked, however that would result in additional roundtrips to the server. Using DHTML obviously cuts down on the trips and puts the weight of the processing on the client.

**Vladdy** · 06-23-2003 10:56 PM

Why do you need the table in the first place???
Just remove all the rubbish from your HTML, get CSS right and then accomplishing what you are trying to do becomes very easy.
Here is a little demo I whipped up for you:
www.vladdy.net/Demos/BatchShowHide.html

**davidcholley** · 06-24-2003 07:49 AM

The solution has presented itself...

function showAddressClick()
{
var spanElements = document.getElementsByTagName('span');

for(i=-; i<spanElements.length; i++)
{
if(spanElements[i].id == "locationAddress")
{
spanElements[i].className == "locationAddressShow";
}
}
}

I had used getElementsByTagName once before and had completely forgotten about it - until I went to bed last night. (Which isn't the first time that I've solved a problem in bed, I once actually had a solution come to mind in a dream.) All of the addresses are enclosed in <span id="locationAddress"> tags.

As to your question about using CSS as opposed to tables, I was not aware that it is possible to obtain the same level of formatting and event handling using CSS. On several pages on my site, clicking on the table row executes an additional query/event based on the value. (See http://www.gatewayorlando.com/conten...tRateSheet.asp)

David H

Thread: Manipulating properties of multiple span tags

Thread Tools

Display

Manipulating properties of multiple span tags

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions