/    Sign up×
Community /Pin to ProfileBookmark

does e.data or e.nodeValue won’t work on span tag??

Copy linkTweet thisAlerts:
Aug 11.2006

I have some text within my span tag, and I’d like to retreive the text with javascript, I tried using data, or nodeValue, but i kept getting a empty string alert.

here’s the html:

[code]
<div id=”container” class=”wrapper”>
<div style=”position:absolute; left:15px; top:100px;” onmousedown=”beginDrag(this, event);”>
<span class=”fieldValue” title=”one”>blah blah blah 1</span>
</div>
</div>

[/code]

and here’s my js:

[code]
function beginDrag(elementToDrag, event) {
//i omitted all unrelated of the functions within beginDrag
//given somewhere within beginDrag, addToTargetContainer is being called..

function addToTargetContainer(){
var textNode = elementToDrag.firstChild;
alert(textNode.data); //this shows empty string
alert(textNode.nodeValue); //this also shows empty string
alert(textNode.nodeName); //this shows #text
}
}//end beginDrag
[/code]

it sure did recongize my span tag as a #text tag, and it won’t show my text value within it, i think i must overlooked something very simple,

thank you for ur help

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@mrhooAug 12.2006 — [CODE]function say_deep(who){
var tmp= '';
var tex;
var pa= who.childNodes;
var cnt= 0;
sayDeepLoop:
while (pa && pa[cnt]){
tex= pa[cnt++];
if(tex.nodeType=== 3 && tex.data) tmp+= ' '+ tex.data;
else if(tex.hasChildNodes()) tmp+= say_deep(tex);
}
return tmp;
}[/CODE]
Copy linkTweet thisAlerts:
@KorAug 12.2006 — I have some text within my span tag, and I'd like to retreive the text with javascript, I tried using data, or nodeValue, but i kept getting a empty string alert.

here's the html:
<i>
</i>&lt;div id="container" class="wrapper"&gt;
&lt;div style="position:absolute; left:15px; top:100px;" onmousedown="beginDrag(this, event);"&gt;
&lt;span class="fieldValue" title="one"&gt;blah blah blah 1&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;



and here's my js:
<i>
</i>function beginDrag(elementToDrag, event) {
//i omitted all unrelated of the functions within beginDrag
//given somewhere within beginDrag, addToTargetContainer is being called..

function addToTargetContainer(){
var textNode = elementToDrag.firstChild;
alert(textNode.data); //this shows empty string
alert(textNode.nodeValue); //this also shows empty string
alert(textNode.nodeName); //this shows #text
}
}//end beginDrag


it sure did recongize my span tag as a #text tag, and it won't show my text value within it, i think i must overlooked something very simple,

thank you for ur help[/QUOTE]

You have miss-reference the element

in your code, [B]this[/B] replaces the DIV tag, not the SPAN tag inside the DIV. Or the textNode is the first child of the SPAN, not of the DIV.

Should have been

var textNode = elementToDrag.[COLOR=Blue]getElementsByTagName('span')[0][/COLOR].firstChild;

You see, a textNode is a childNode also, same as the tags. A textNode [I]is[/I] the firstChild of the tag which nests it (the direct parentNode), the SPAN in your case
Copy linkTweet thisAlerts:
@sirpelidorauthorAug 14.2006 — You have miss-reference the element

Should have been

var textNode = elementToDrag.[COLOR=Blue]getElementsByTagName('span')[0][/COLOR].firstChild;

[/QUOTE]

Kor, it worked!!!!! thank you very for point this out.

I guess the major problem is my DOM knowledge is not solid enough, so I keep mis-reference the correct node.

Once again, thank you for the tip ?
Copy linkTweet thisAlerts:
@sirpelidorauthorAug 14.2006 — 
a textNode is a childNode also, same as the tags. A textNode [I]is[/I] the firstChild of the tag which nests it (the direct parentNode), the SPAN in your case[/QUOTE]


Hi Kor, 1 more question:

since textNode is a child of SPAN, and SPAN is a child of DIV, would you please help explain to me why the following lines of code don't work?

var textNode = elementToDrag.firstChild.firstChild;

alert(textNode.data); <-- it complains textNode has no properties.
Copy linkTweet thisAlerts:
@KorAug 14.2006 — between the DIV and the SPAN there is also a [I]possible[/I] text node, which, in theory (DOM compliant) should the the firstChild of the DIV. Unfurtunately IE and Moz see in different ways those possible textNodes (called "gaps"). The best cross-browser method is to use the getElementsByTagName() method.

There is also another way, by checking the [B]nodeType[/B] attribute value of the first child in a while() loop, till the value == 1 (an "tagged" element).

var textParent=elementToDrag.firstChild;

while(textParent.nodeType!=1){

textParent=textParent.firstChild;

}

var textNode = textParent.firstChild;
×

Success!

Help @sirpelidor spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...