Getting value of span with JavaScript

Hello,

I'm trying to get the value of a span. In ASP.NET when you use a Label it transforms it into a span on the client side. I can't get the value of the span using my JavaScript. How do you get the value of a span using JavaScript?

Thanks!

Code:

---

<span id="lblOtherOptionsTotal" style="font-weight:bold;">$0.00</span>

---

Quote:

---

Originally Posted by broadvision123

Hello,

I'm trying to get the value of a span. In ASP.NET when you use a Label it transforms it into a span on the client side. I can't get the value of the span using my JavaScript. How do you get the value of a span using JavaScript?

Thanks!

Code:

---

<span id="lblOtherOptionsTotal" style="font-weight:bold;">$0.00</span>

---

---

You'll just have to use the innerHTML / innterText attributes :)

Code:

---

<script type="text/javascript">
  <!--
    var TheDiv = document.getElementById("The_Div_Name_Here");
    window.alert(TheDiv.innerHTML);
    // Or:
    // window.alert(TheDiv.innerText);
  //-->
</script>

---

You should use innerText is there is any other HTML inside the span, otherwise the innerHTML will do fine :)

Cheers,

RyanJ

It work prefectly in IE and Opera but what about Firefox? How to ge tthis value in FireFox?

Ryan... I am going to slap you with that bit of ancient history next time I see you online!

All text within elements is in the form of #text nodes, these are accesible via the DOM.

First you find the span element.

Code:

---

var myspan = document.getElementById('myspan');

---

Assuming there is nothing but text within it, we can get the text node like this:

Code:

---

var span_textnode = myspan.firstChild;

---

Then use the data property to get the actual text:

Code:

---

var span_text = span_textnode.data;

---

innerHTML and innerText are non-standard properties. The DOM method shown above is far superior and more robust as it works with the parsed DOM tree; rather than editing the in-memory source code which then has to be reparsed (less efficient and risking syntactic errors).

Tkanks a lot for quick answer :cool: :D

BTW
I knew that it is one of the properties of span element but I didn't know witch one. Is there any page & documentaion witch all javascript objects & properties?

There is the official DOM2 specification:
http://www.w3.org/DOM/DOMTR#dom2
The stuff in Core and HTML is pretty much cross-browser. Views is not much of a spec: it effectively specifies that the window object should have a document property (which it does in all browsers) and that the document object should have a defaultView property (which doesn't work across browsers, but is pretty irrelevant in today's technology).
Style and Events is supported everywhere but IE - IE has partial support for Style and pretty much none for Events.
Traversal & Range is poorly supported in general, although it's very useful.

DOM 3 (below) is even less supported. Firefox supports Load & Save, but I don't know if any others do. In any case, the spec has been pretty much superseded by XmlHttpRequest. Validation is not supported in any browser as far as I know. The new features of Core are sporadically supported.
Of particular interest, however, is the DOM3 Node.textContent property. This property, which is supported in Firefox and, I think, Konqueror and Opera too, is equivalent to the non-standard innerText property, so you can use a simple object-detection switch to obtain the text.

Code:

---

function getText(n)
{
  if('textContent' in n) {
    return n.textContent;
  } else if('innerText' in n) {
    return n.innerText;
  } else {
    // Call a custom collecting function, throw an error, something like that.
  }
}

---

penagate...but if it has value within....how do i get the value and how can i change it with JavaScript ??
Thanks !