Change the same span element all the time

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

David - 28 Apr 2006 18:24 GMT

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 so it uses the
same element name? This is driving me insane. On the second call to var
spanElm = document.getElementById("FirstNameLengthLabel"); spanElm is
set to NULL.

<script language=javascript>

function txtFirstNameUpdate()
{
var para = document.getElementById("ForenameCell");
alert (para);
var spanElm = document.getElementById("FirstNameLengthLabel");
alert (spanElm);
var newSpan = document.createElement("FirstNameLengthLabel");
alert (newSpan);
var newText = document.createTextNode("Next label");
alert (newText);
newSpan.appendChild(newText);

var test = para.replaceChild(newSpan,spanElm);
}

</script>

...<HTML>
<tr id="FormTableRow1">
        <td width="107">Förnamn :</td>
        <td width="388" id="ForenameCell"> <INPUT Name="txtFirstName" Size=10
MaxLength=30 onkeypress="txtFirstNameUpdate()"> 
        <span id="FirstNameLengthLabel">First label</span>
        <td width="90">Efternamn :</td>
        <td><INPUT Name="txtLastName" Size=20 MaxLength=30> </td>
    </tr>
...<HTML>

Thanks for any help

David

Reply to this Message

Ronaldo Junior - 28 Apr 2006 18:52 GMT

> 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
[quoted text clipped - 19 lines]
> var test = para.replaceChild(newSpan,spanElm);
> }

It won't work twice because the replaceChild method actually replaces
the node, erasing it to give place to the other one to replace to.
Therefore, the first node won't exist after the first call.

I'd suggest something but I didn't figure what you're trying to do.

Reply to this Message

David - 28 Apr 2006 19:33 GMT

Hi,

I basically have a label in a span line that i want updated for example
with key presses.

I literally just try to change the text all the time, but cannot seem
to get it to work. Any suggestions?

Thanks

David

> > 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
[quoted text clipped - 25 lines]
>
> I'd suggest something but I didn't figure what you're trying to do.

Reply to this Message

Ronaldo Junior - 28 Apr 2006 19:59 GMT

You don't need to replace the entire element to chance its text. Use
the innerText property to modify it:

var newSpan = document.createElement("FirstNameLengthLabel");
newSpan.innerText = "New label text";

> Hi,
>
[quoted text clipped - 37 lines]
> >
> > I'd suggest something but I didn't figure what you're trying to do.

Reply to this Message

Ronaldo Junior - 28 Apr 2006 20:06 GMT

> You don't need to replace the entire element to chance its text. Use
> the innerText property to modify it:
>
> var newSpan = document.createElement("FirstNameLengthLabel");
> newSpan.innerText = "New label text";

Oops, I copied the wrong part of your code, sorry.

var spanElm = document.getElementById("FirstNameLengthLabel");
spanElm.innerText = "New label text";

Reply to this Message

David - 28 Apr 2006 20:13 GMT

Thats great thanks... I couldnt find that :(

Are there any good javadoc like sites that document all of the DOM
stuff?

Thanks again for the great help.

David

Reply to this Message

RobG - 29 Apr 2006 12:54 GMT

> You don't need to replace the entire element to chance its text. Use
> the innerText property to modify it:

What are you replying to? Please don't top-post in this newsgroup.

> var newSpan = document.createElement("FirstNameLengthLabel");
> newSpan.innerText = "New label text";

Why use an IE proprietary method when standards compliance is no more
difficult and ensures support for a much wider variety of browsers?

[...]

Signature

Rob

Reply to this Message

RobG - 29 Apr 2006 12:52 GMT

> Hi,
>
[quoted text clipped - 6 lines]
>
> <script language=javascript>

The language attribute is deprecated, type is required:

<script type="text/javascript">

> function txtFirstNameUpdate()
> {
[quoted text clipped - 3 lines]
> alert (spanElm);
> var newSpan = document.createElement("FirstNameLengthLabel");

That does not create a span element. The parameter provided to the
createElement method is supposed to be an element tag name, not an ID.

var newSpan = document.createElement("span");

<URL:http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-2141741547>

But since 'para' actually refers to a table cell, I have no confidence
that your variable names bear any relationship to the elements they
refer to.

What is 'newSpan' supposed to be?

> alert (newSpan);
> var newText = document.createTextNode("Next label");
> alert (newText);
> newSpan.appendChild(newText);
>
> var test = para.replaceChild(newSpan,spanElm);

That's OK, you've replaced the previous element 'FirstNameLengthLabel'
with 'newSpan' element - I'll presume you meant to create a span
element. You didn't give the new element an ID so you can't use
getElementById to get a reference to it.

Do not use innerText as suggested elsewhere, that is an IE proprietary
method that will not work in most browsers. Stick to standards and your
stuff will work in many more browsers.

> }
>
[quoted text clipped - 6 lines]
> MaxLength=30 onkeypress="txtFirstNameUpdate()"> 
> <span id="FirstNameLengthLabel">First label</span>

If what you are trying to do is replace the text inside th span element
with id 'FirstNameLengthLabel', you could use:

function txtFirstNameUpdate()
{
var spanElm = document.getElementById("FirstNameLengthLabel");
spanElm.innerHTML = "Next label";
}

However, a more generic function to replace the content of an element
with some text is:

function replaceTextById(id, text)
{
var el = document.getElementById(id);
if (el){
while (el.firstChild){
el.removeChild(el.firstChild);
}
el.appendChild(document.createTextNode(text));
}
}

Signature

Rob

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / April 2006

Change the same span element all the time