473,325 Members | 2,308 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,325 software developers and data experts.

How to know span content???

I shoul want to know the content o a certain span:
************************************************** **********************

<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script type="text/javascript">
function return_span_value(){
var s = document.getElementById("x");
alert(x.nodeName);
alert(x.nodeValue);
}
</script>
<body>
<span id="x">Hello world!</span>
<input type="button" value="Click to know span value"
onClick="return_span_value();">
</body>
</html>

************************************************** **********************

It should return "Hello world!" doesn't it?

Any help appreciated.

Regards.

--
Fabri
(Non è tuttu oru chiddu chi stralluci, né tuttu veru chiddu ca si dici)
Jul 23 '05 #1
6 14081
*** Fabri wrote/escribió (Thu, 17 Mar 2005 10:03:56 +0100):
function return_span_value(){
var s = document.getElementById("x");
alert(x.nodeName);
alert(x.nodeValue);
}


Try:

alert(x.innerHTML);
--
-- Álvaro G. Vicario - Burgos, Spain
-- Don't e-mail me your questions, post them to the group
--
Jul 23 '05 #2
Fabri wrote:

[snip]
var s = document.getElementById("x");
alert(x.nodeName);
alert(x.nodeValue);
I assume you meant s.node<...>

[snip]
It should return "Hello world!" doesn't it?


No. The SPAN element itself doesn't contain the text; it has a child
text node and /that/ contains the text:

/* Check for getElementById support before using the method. */
if(document.getElementById) {
var s = document.getElementById('x'), tN;

/* Check that s is a valid reference, and that it
* has non-null object reference in firstChild.
*/
if(s && (tN = s.firstChild)) {
/* tN now references the text node within the SPAN.
* Displaying tN.nodeName should reveal '#text'.
*
* Both the data and nodeValue properties
* of a text node return the text within.
*/
alert(tN.data); // 'Hello world!'
}
}

Hope that helps,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #3
Michael Winter wrote:
alert(tN.data);


Also

alert(tN.nodeValue);

works.

Regards.

--
Fabri
(Non è tuttu oru chiddu chi stralluci, né tuttu veru chiddu ca si dici)
Jul 23 '05 #4
<snip>
both the data and nodeValue properties
* of a text node return the text within.
*/
and with that Michael would you be kind enough to explain the difference and
when to use one or the other? I find nothing definitive. TIA
jimbo


ael Winter Replace ".invalid" with ".uk" to reply by e-mail.

Jul 23 '05 #5
Fabri wrote:
I shoul want to know the content o a certain span:
************************************************** **********************
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>
<script type="text/javascript">
function return_span_value(){
var s = document.getElementById("x");
alert(x.nodeName);
alert(x.nodeValue);
}
</script>
<body>
<span id="x">Hello world!</span>
<input type="button" value="Click to know span value"
onClick="return_span_value();">
</body>
</html>

************************************************** **********************
It should return "Hello world!" doesn't it?

Any help appreciated.

Regards.

--
Fabri
(Non è tuttu oru chiddu chi stralluci, né tuttu veru chiddu ca si

dici)

For starters - don't put a <script> between <head> & <body> tags.

It may not be a good idea to make any assumptions about what may be
appended to that span - could be nested elements, could be whitespace
nodes...innerHTML will return rich content, but is non-standard. Here's
another possibility.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script type="text/javascript">

if (document.ELEMENT_NODE == null)
{
document.ELEMENT_NODE = 1;
document.TEXT_NODE = 3;
}

function normalizeString(s)
{
return s.replace(/\s\s+/g, " ").replace(/^\s*|\s*$/g, "");
}

function getTextValue(el)
{
var i;
var s = "";
for (i = 0; i < el.childNodes.length; i++)
if (el.childNodes[i].nodeType == document.TEXT_NODE)
s += el.childNodes[i].nodeValue;
else if (el.childNodes[i].nodeType == document.ELEMENT_NODE &&
el.childNodes[i].tagName == "BR")
s += " ";
else s += getTextValue(el.childNodes[i]);
return normalizeString(s);
}

function return_span_value(span_id)
{
var s = document.getElementById(span_id);
alert('span id: ' + s.id);
alert('span nodeName: ' + s.nodeName);
alert('s "text value": ' + getTextValue(s));
}

</script>
</head>
<body>
<span id="x1">Hello world!</span>
<input type="button" value="Click to know span value"
onClick="return_span_value('x1');">
<span id="x2"><a href="#null"><b>H</b>ello world!</a></span>
<input type="button" value="Click to know span value"
onClick="return_span_value('x2');">
</body>
</html>

//getTextValue courtesy Mike Hall
//http://www.brainjar.com/dhtml/tablesort/default4.asp

According to webreference:

The Document Object Model includes two relevant properties you can use:
data and nodeValue. You can use these properties to modify the content
of text nodes only. Both properties are set to the text node's value
and are fully interchangeable.

Jul 23 '05 #6
J. J. Cale wrote:
<snip>
* both the data and nodeValue properties
* of a text node return the text within.
*/


and with that Michael would you be kind enough to explain the difference and
when to use one or the other?


As far as I know, there isn't one. Both Node and CharacterData/Text
are fundamental interfaces (so they should be implemented by all
conforming user agents) and both data and nodeValue share the same
exception behaviour. Just pick which one you prefer. I use data
because it's unique and so it should be obvious (if not already) that
code is dealing with a text node.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #7

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

Similar topics

7
by: deko | last post by:
How to change a link's color based on a php variable? I have a number of links on a page: <p><a href="page1.php">Page 1</a></p> <p><a href="page2.php">Page 2</a></p> <p><a...
9
by: Tim Lister | last post by:
I'm used to seeing crappy pages with FONT tags littered everywhere, even for some bizarre reason when CSS is in use also, so i was less than ecstatic when i saw it happening in yet another page. ...
23
by: Mikko Ohtamaa | last post by:
From XML specification: The representation of an empty element is either a start-tag immediately followed by an end-tag, or an empty-element tag. (This means that <foo></foo> is equal to...
3
by: ShadowMan | last post by:
Hi all I have something like <DIV style="border: 1px solid black"> <SPAN>left side text</span> <span>right side text</span> </div> Using CSS I would like to aling first SPAN on left and...
6
by: hsomob1999 | last post by:
so i have a <ul> and I allow the user to append items to it. The problem is that on mozilla the <span class="line"> which is just a line to divide the sections gets overlaped and doesnt move down...
5
by: ste.paoletti | last post by:
I have a problem with css I have a this xhtml code: <span> <span> <span/> <input type="radio"/> .... <span/> <input type="button" onclick ="var s=document.createElement('span');...
2
by: ricky | last post by:
Hello, If anyone could help me with this I would highly appreciate it. I've tried everything and nothing works. What I am trying to do is so damn basic and it's just frustrating that it seems...
3
by: Steve | last post by:
Hi; I'm working on a demo of using a timer on a web site that is made visible by making a div visible. My "PopIn Box" div is empty on the page. Before making it visible I used javascript to...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

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.