Change the same span element all the time

D

David

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()">&nbsp;
<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
 
R

Ronaldo Junior

David said:
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);
}
Click to expand...

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.
 
D

David

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
 
R

Ronaldo Junior

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";
 
R

Ronaldo Junior

Ronaldo said:
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";
Click to expand...

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

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

David

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
 
R

RobG

David said:
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>
Click to expand...

The language attribute is deprecated, type is required:

function txtFirstNameUpdate()
{
var para = document.getElementById("ForenameCell");
alert (para);
var spanElm = document.getElementById("FirstNameLengthLabel");
alert (spanElm);
var newSpan = document.createElement("FirstNameLengthLabel");
Click to expand...

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);
Click to expand...

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.

}

</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()">&nbsp;
<span id="FirstNameLengthLabel">First label</span>
Click to expand...

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));
}
}
 
R

RobG

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

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

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

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

[...]
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery? 4
How can I create a table using the input element? 1
Only one table shows up with the information 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Filter table rows based on multiple checkboxes value 2
Image shifts to the right when export the page to pdf 4
Closing an overlay outside the overlay as well 1
Need Help, Both submit button works same, i need both submit button works differently, the one button override other button 3

Members online

Total: 34 (members: 1, guests: 33)
Robots: 453

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top