Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #16535 > unrolled thread

firstChild Problem

Back to article view | Back to comp.lang.javascript

Contents

  firstChild Problem "Mel Smith" <med_cutout_syntel@aol.com> - 2012-10-10 11:20 -0600
    Re: firstChild Problem -- Correction "Mel Smith" <med_cutout_syntel@aol.com> - 2012-10-10 11:35 -0600
      Re: firstChild Problem -- Correction "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2012-10-10 20:42 +0300
    Re: firstChild Problem Denis McMahon <denismfmcmahon@gmail.com> - 2012-10-10 17:40 +0000
    Re: firstChild Problem Matt McDonald <matt@fortybelow.ca> - 2012-10-10 13:56 -0400
      Re: firstChild Problem "Mel Smith" <med_cutout_syntel@aol.com> - 2012-10-10 12:13 -0600

#16535 — firstChild Problem

Hi:

    I'm trying to set a value into a <span> element which on loading is 
empty.

    This causes a FF error.

    If I beging with an non-empty value in the span element, there is no 
problem.

    But if I (in a JS function try to initialize the value in the <span>, FF 
says the firstChile value is null !  (I *know* that it is (or *may*) be 
empty, but wish to init it anyway.

    What stupid thing am I assuming here ??

Thanks !

-- Mel Smith


***************************
myjsfunc() {
..
// I'm trying to initialize a text node with the word 'Searching'
// But when I try to, then,
// the next line results in a FireFox error: 'srchtxt.firstChild' is null

// Here is the line that results in the error:

srchtxt.firstChild.nodeValue = "Searching ...";

// Yet if I intentionally place a 'searching ...' string
// in the <span> on the original page, it works correctly, and if I then
// set the nodeValue later to ""  (i.e., empty string), and re-enter my 
function,
// there is no error ?
}


<body>
<div id="somediv">
<span id="srchtxt"></span>
</div>
</body>

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

[toc] | [next] | [standalone]

#16536 — Re: firstChild Problem -- Correction

Hi:

    In trying to simplify my example, I removed a lot of 'style' stuff from 
the <span>, so there really *is* or *should be* a firstChild, even though it 
starts out empty.


-Mel


<body>
<div id="somediv">
<span id="srchtxt" style="lots of stuff here"></span>
</div>
</body>

[toc] | [prev] | [next] | [standalone]

#16538 — Re: firstChild Problem -- Correction

2012-10-10 20:35, Mel Smith wrote:

>      In trying to simplify my example, I removed a lot of 'style' stuff from
> the <span>, so there really *is* or *should be* a firstChild, even though it
> starts out empty.

No, if you have <span></span>, then the element (as a DOM object or 
otherwise) has no children.

Why don't you simply set innerHTML?

document.getElementById('srchtxt').innerHTML = "Searching ...";

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/

[toc] | [prev] | [next] | [standalone]

#16537

On Wed, 10 Oct 2012 11:20:53 -0600, Mel Smith wrote:

> ***************************
> myjsfunc() {
> ..
> // I'm trying to initialize a text node with the word 'Searching'
> // But when I try to, then,
> // the next line results in a FireFox error: 'srchtxt.firstChild' is
> null
> 
> // Here is the line that results in the error:
> 
> srchtxt.firstChild.nodeValue = "Searching ...";

Assuming: <span id="srchtxt"></span>

// takes one param, expects boolean value
function displaySearchingText( searching ) {

var theSpan = document.getElementById( "srchtxt" );

while ( theSpan.childNodes.length != 0 )
  theSpan.removeChild( theSpan.childNodes.item( 0 ) );

if ( searching )
  theSpan.appendChild( document.createTextNode( "Searching ..." ) );

}

Rgds

Denis McMahon

[toc] | [prev] | [next] | [standalone]

#16539

On 10/10/12 13:20, Mel Smith wrote:

> // Here is the line that results in the error:
>
> srchtxt.firstChild.nodeValue = "Searching ...";

As your HTML mark-up illustrates, there is no `Text` node
with which one could work.

`<span></span>` will create an `HTMLSpanElement` in the document
tree with no child nodes.

> // Yet if I intentionally place a 'searching ...' string
> // in the<span>  on the original page, it works correctly, and if I then
> // set the nodeValue later to ""  (i.e., empty string), and re-enter my
> function,
> // there is no error ?

Yes, as the text added between the start and end tags denotes a
`Text` node that will be created as a child node of the
`HTMLSpanElement`. Thus, it is available to be scripted.

Once the node has been created in the document tree, it needs to
be removed in order to discard it--and even then, references inside
of scripts can still access it, so the references need to be cleared. 
Emptying its `nodeValue` property will not delete it: the node
still exists in the document tree.

Using intial text as you have done is a good idea, as it provides
an initial state for the client before any scripting is performed.
If JavaScript is disabled or the corresponding script does not
execute, the initial state will be presented.

-- 
`The theologian Meric Casaubon argued--in his 1668 book, *Of Credulity
and Incredulity*--that witches must exist because, after all, everyone
believes in them. Anything that a large number of people believe must
be true'--Carl Sagan--*The Demon-Haunted World*.

[toc] | [prev] | [next] | [standalone]

#16542

Hi Matt, Denis, and Jukka:

    Thanks for all the info.

    I now understand it :))

    .. and I guess I'll start out with an initialized nodeValue of 
'Searching ...'  and, of course , in the enclosing division I'll set (in 
CSS) to display:none; on the original page,  then when actually searching, 
I'll set it to display: inline;, then if I've found the item, I'll change 
the text to 'Found' or whatever.

In any ccase,

    Thanks to all of you !

-Mel

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web