473,404 Members | 2,170 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,404 software developers and data experts.

How to check if a named SPAN element exists (IE)?

Iīve got a number of SPAN elements named "mySpan1", "mySpan2", "mySpan3"
etc, and want to set their "style.display" to "inline".

This works (only needs to work on IE5.5+):

for (var x = 1; x < 20; x++) {
document.all('mySpan'+x).style.display = "inline";
}

But I donīt know how many SPAN elements there are, so I need to set x to a
value big enough to change them all. This does, however, produce a error
when the function tries to set "style.display" on a SPAN that doesnīt exist.
So I need to check if the SPAN element does exist before I try to set itīs
"style.display".

for (var x = 1; x < 20; x++) {
If (document.all('mySpan'+x)) <-- something like this (but that works ;)
document.all('mySpan'+x).style.display = "inline";
}

But how do I do this? Help, anyone?

/Mike
Jul 20 '05 #1
2 5993
"Mike" <mi**@nomail.se> wrote in message
news:7w********************@newsc.telia.net...
Iīve got a number of SPAN elements named "mySpan1", "mySpan2",
"mySpan3" etc,
When you say "named" do you mean they have NAME attributes? The NAME
attribute is not valid on SPAN elements according to the HTML 4 DTDs.
But as the example strings conform to the requirements of an ID
attribute and ID attributes are valid on all elements, it would make
sense to be using an ID attribute.
and want to set their "style.display" to "inline".
The default display property of a SPAN element is "inline", but maybe
you have pre-set them to "none" in the CSS.
This works (only needs to work on IE5.5+):
Intranet or broken by design (in the sense that there is nothing here
that would prevent this form being implemented 100% successfully on
every modern dynamic visual browser (and then some))? It is often
helpful to go into the context in which you are working when asking
questions here.
for (var x = 1; x < 20; x++) {
document.all('mySpan'+x).style.display = "inline";
IE blurs the distinction between objects and function when dealing with
host objects and method. Native code method report that they or "object"
when tested with the typeof operator and DOM elements and collections
appear to accept property look-ups in the form of parameterised function
calls. But the document.all collection is best thought of as an object,
and so references to named properties of that object should use the
standard ECMA Script (which JScript claims to be an implementation of)
square bracket notation property accessor syntax:-

document.all['mySpan'+x].style.display = "inline";

It is difficult to say why IE allows parenthesise to be used in place of
property accessors to achieve the same task. It might be an attempt to
make scripting easier for people who don't really understand what they
are doing (tolerate what would be errors in other, stricter,
environments). But habitually using parentheses instead of square
brackets when accessing DOM object properties is one of the things that
makes IE centred script authors convinced that cross-browser scripting
is harder than it really is. If they had just learnt to use the proper
language feature in the first place they would find that a lot of IE
only scripts would work on many other browsers unaltered.

<URL: http://jibbering.com/faq/#FAQ4_39 >
}

But I donīt know how many SPAN elements there are,
Why not, where are they coming from? If they are generated by
server-side processes then you do know how many there are and are in a
position to tell the JScript.
so I need to set x to a value big enough to change them all.
Surly setting - x - to a "big enough" value is of no use at all. It is
the - 20 - that decides how many elements you check, but that is
probably what you mean. If you have a server-script generating the SPAN
elements it should be in a position to write a value in place of that -
20 - based on the number of SPANs included on the page. Unless the
JScript is in a separate static file, but even then the server script
could create a global variable on the page that could be referred to in
place of the - 20 - in the external file.
This does, however, produce a error when the function
tries to set "style.display" on a SPAN that doesnīt exist.
It would.
So I need to check if the SPAN element does exist before I
try to set itīs "style.display".

for (var x = 1; x < 20; x++) {
If (document.all('mySpan'+x))<--something like this (but that works ;)
Apart from the parenthesised property access (which usually works on IE)
the only reason for that not working is the initial capital "I " in
the - if - statement. ECMA Script, being case sensitive, would take that
as an identifier and treat the expression as an attempt to execute a
function referred to by that identifier. Erroring because there probably
is no - If - variable.

if(document.all['mySpan'+x]){
... // it exists! (or at least, whatever it refers
// to type-converts to boolean true, which should
// be the same thing where properties of the
// document.all collection are concerned).
}
document.all('mySpan'+x).style.display = "inline";
}

But how do I do this? Help, anyone?


Because SPAN elements should not have NAME attributes in valid HTML 4
but can have ID attributes it would probably be best to use the ID
attribute (if you are not already). As a result it would be possible to
use the W3C DOM document.getElementById method to look up the reference
to the SPAN element using that ID attribute. IE 5.0+ implements the
getElementById method and it is a good habit to use W3C DOM methods
where they are implemented by IE instead of equivalent IE proprietary
features (document.all in this case). As it happens, it appears that IE
implements getElementById so that it looks up the element in the
document.all collection anyway, but habitually preferring the most
widely supported method even when writing exclusively for IE makes
writing cross-browser code easier at a later date.

The "big enough" number strategy doesn't seem like a good idea at all.
The number is going to have to be big enough to account for all possible
numbers of SPAN elements else it will fail, and that means a loop that
does a lot of work and achieves nothing for most of the time when there
are only a small number of SPAN elements.

It would probably be reasonable to - break - the loop as soon as the
first 'mySpan'+x string failed to find a corresponding SPAN (assuming
that the spans are sequentially numbered without interruptions). But
then a - for - loop might not be the best option, probably a - while -
loop would be better suited to the situation.

var spanEl, count = 1;
while(spanEl = document.getElementById('mySpan' + count++)){
spanEl.style.display = 'inline';
}

- would start with "mySpan1" and keep going until it could not find
"mySpan"+n.

Richard.
Jul 20 '05 #2
Wow,
Thanks a lot for that long and very indepth answer Richard!!

Really appreciate it - again, thx.

/Mike

Iīve got a number of SPAN elements named "mySpan1", "mySpan2",
"mySpan3" etc,


When you say "named" do you mean they have NAME attributes? The NAME
attribute is not valid on SPAN elements according to the HTML 4 DTDs.
But as the example strings conform to the requirements of an ID
attribute and ID attributes are valid on all elements, it would make
sense to be using an ID attribute.
and want to set their "style.display" to "inline".


The default display property of a SPAN element is "inline", but maybe
you have pre-set them to "none" in the CSS.
This works (only needs to work on IE5.5+):


Intranet or broken by design (in the sense that there is nothing here
that would prevent this form being implemented 100% successfully on
every modern dynamic visual browser (and then some))? It is often
helpful to go into the context in which you are working when asking
questions here.
for (var x = 1; x < 20; x++) {
document.all('mySpan'+x).style.display = "inline";


IE blurs the distinction between objects and function when dealing with
host objects and method. Native code method report that they or "object"
when tested with the typeof operator and DOM elements and collections
appear to accept property look-ups in the form of parameterised function
calls. But the document.all collection is best thought of as an object,
and so references to named properties of that object should use the
standard ECMA Script (which JScript claims to be an implementation of)
square bracket notation property accessor syntax:-

document.all['mySpan'+x].style.display = "inline";

It is difficult to say why IE allows parenthesise to be used in place of
property accessors to achieve the same task. It might be an attempt to
make scripting easier for people who don't really understand what they
are doing (tolerate what would be errors in other, stricter,
environments). But habitually using parentheses instead of square
brackets when accessing DOM object properties is one of the things that
makes IE centred script authors convinced that cross-browser scripting
is harder than it really is. If they had just learnt to use the proper
language feature in the first place they would find that a lot of IE
only scripts would work on many other browsers unaltered.

<URL: http://jibbering.com/faq/#FAQ4_39 >
}

But I donīt know how many SPAN elements there are,


Why not, where are they coming from? If they are generated by
server-side processes then you do know how many there are and are in a
position to tell the JScript.
so I need to set x to a value big enough to change them all.


Surly setting - x - to a "big enough" value is of no use at all. It is
the - 20 - that decides how many elements you check, but that is
probably what you mean. If you have a server-script generating the SPAN
elements it should be in a position to write a value in place of that -
20 - based on the number of SPANs included on the page. Unless the
JScript is in a separate static file, but even then the server script
could create a global variable on the page that could be referred to in
place of the - 20 - in the external file.
This does, however, produce a error when the function
tries to set "style.display" on a SPAN that doesnīt exist.


It would.
So I need to check if the SPAN element does exist before I
try to set itīs "style.display".

for (var x = 1; x < 20; x++) {
If (document.all('mySpan'+x))<--something like this (but that works ;)


Apart from the parenthesised property access (which usually works on IE)
the only reason for that not working is the initial capital "I " in
the - if - statement. ECMA Script, being case sensitive, would take that
as an identifier and treat the expression as an attempt to execute a
function referred to by that identifier. Erroring because there probably
is no - If - variable.

if(document.all['mySpan'+x]){
... // it exists! (or at least, whatever it refers
// to type-converts to boolean true, which should
// be the same thing where properties of the
// document.all collection are concerned).
}
document.all('mySpan'+x).style.display = "inline";
}

But how do I do this? Help, anyone?


Because SPAN elements should not have NAME attributes in valid HTML 4
but can have ID attributes it would probably be best to use the ID
attribute (if you are not already). As a result it would be possible to
use the W3C DOM document.getElementById method to look up the reference
to the SPAN element using that ID attribute. IE 5.0+ implements the
getElementById method and it is a good habit to use W3C DOM methods
where they are implemented by IE instead of equivalent IE proprietary
features (document.all in this case). As it happens, it appears that IE
implements getElementById so that it looks up the element in the
document.all collection anyway, but habitually preferring the most
widely supported method even when writing exclusively for IE makes
writing cross-browser code easier at a later date.

The "big enough" number strategy doesn't seem like a good idea at all.
The number is going to have to be big enough to account for all possible
numbers of SPAN elements else it will fail, and that means a loop that
does a lot of work and achieves nothing for most of the time when there
are only a small number of SPAN elements.

It would probably be reasonable to - break - the loop as soon as the
first 'mySpan'+x string failed to find a corresponding SPAN (assuming
that the spans are sequentially numbered without interruptions). But
then a - for - loop might not be the best option, probably a - while -
loop would be better suited to the situation.

var spanEl, count = 1;
while(spanEl = document.getElementById('mySpan' + count++)){
spanEl.style.display = 'inline';
}

- would start with "mySpan1" and keep going until it could not find
"mySpan"+n.

Richard.

Jul 20 '05 #3

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

Similar topics

3
by: deko | last post by:
I use #currentlink in a nav list of links to indicate which page is currently being viewed. The code in the nav list looks like this: <p><a href="index.php">Home Page</a></p> <p><a...
9
by: Wang, Jay | last post by:
Hello, all, I would like to enable some text between <SPAN url="http://www.testserver.com/">WORD TO BE DRAGGED </SPAN>. I put some javascript and it will extract http://www.testserver.com/ from...
27
by: Nicholas Couch | last post by:
I have a little form with a couple of dynamically generated list boxes. When the user makes a selection from the first box, the second box is refreshed. When they make a selection from the second...
9
by: developer | last post by:
Does anyone know what is the way IE treats span tags(<span>) and table tags(<tr>, <td>)? Should the <span> tag be encolsed in tds and trs if it placed with other elements that are in a table? Can...
7
by: David | last post by:
Hi, I'd really appreciate any help. Im trying to change a label over and over again. I can change it the first time, by using the following code, however it never works again, how can i do this...
7
by: mavigozler | last post by:
IE7 does not appear to set an event on contained text inside SPAN elements whose 'onclick', 'onmouseover', and 'onmouseout' events, defying the HTML recommendation. Firefox appears to conform. ...
5
by: Summercool | last post by:
wow... i didn't know that, for <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/loose.dtd"> <span style="width: 100px; background:...
5
by: Brent | last post by:
Take this small HTML fragment: span.theClass{float:left;width:100px;cursor:pointer;cursor:hand;} ------------------------ <div> <span id="1" class="theClass">&nbsp;<span> <span id="2"...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
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,...
0
Oralloy
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,...
0
jinu1996
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...
0
agi2029
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,...
0
isladogs
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...

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.