473,320 Members | 1,831 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Change the same span element all the time

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

Apr 28 '06 #1
7 2062
David wrote:
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);
}


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.

Apr 28 '06 #2
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

Ronaldo Junior wrote:
David wrote:
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);
}


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.


Apr 28 '06 #3
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";

David wrote:
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

Ronaldo Junior wrote:
David wrote:
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);
}


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.


Apr 28 '06 #4
Ronaldo Junior wrote:
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";

Apr 28 '06 #5
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

Apr 28 '06 #6
David wrote:
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>
The language attribute is deprecated, type is required:

<script type="text/javascript">

function txtFirstNameUpdate()
{
var para = document.getElementById("ForenameCell");
alert (para);
var spanElm = document.getElementById("FirstNameLengthLabel");
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.

}

</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>


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

--
Rob
Apr 29 '06 #7
Ronaldo Junior wrote:
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?

[...]

--
Rob
Apr 29 '06 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: deko | last post by:
How to change a link's color based on a php variable? I have a number of links on a page: <p><a href="page1.php">Page 1</a></p> <p><a href="page2.php">Page 2</a></p> <p><a...
15
by: Henning Vestergaard Poulsen | last post by:
Hi, I have a problem that I hope someone can help me with. I'm building a web page with pictures I've taken with my digital camera. I have succeded making a javacript that, when clicking on a...
6
by: Csaba2000 | last post by:
How do I detect when the font size has been changed (especially by user action: either Ctrl+Scroll wheel or View/Text Size)? This is just for use on IE 5.5+, but it would be great if there was a...
9
by: Wang, Jay | last post by:
Hello, all, I would like to enable some text between <SPAN url="http://www.testserver.com/">WORD TO BE DRAGGED </SPAN>. I put some javascript and it will extract http://www.testserver.com/ from...
9
by: developer | last post by:
Does anyone know what is the way IE treats span tags(<span>) and table tags(<tr>, <td>)? Should the <span> tag be encolsed in tds and trs if it placed with other elements that are in a table? Can...
3
by: mscir | last post by:
I'm adding text to a div using innerHTML, and watching the width of the div using offsetWidth. In IE the offsetWidth increases when the div gets wider, but in Netscape 7.2 or Firefox 1.0.3 it...
2
by: futurepy | last post by:
By default color of the list marker, disc or circle or square, is black. Is there a way to change the color, for example, to red or blue? Thanks.
2
by: Lorenzo Thurman | last post by:
I would like to have an element, a text string, change into a select when a mouseover occurs and then change back to text when a selection is made or when a mouse out occurs. I looked a t using...
6
by: silly putty | last post by:
hello. i have a <tablewith each cell having its own unique ID (see below). What i want to do is change the CLASS attribute for the SPAN in one of the cells. i'm currently testing this in IE 6. ...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.