473,657 Members | 2,432 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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.getEle mentById("First NameLengthLabel "); spanElm is
set to NULL.

<script language=javasc ript>

function txtFirstNameUpd ate()
{
var para = document.getEle mentById("Foren ameCell");
alert (para);
var spanElm = document.getEle mentById("First NameLengthLabel ");
alert (spanElm);
var newSpan = document.create Element("FirstN ameLengthLabel" );
alert (newSpan);
var newText = document.create TextNode("Next label");
alert (newText);
newSpan.appendC hild(newText);

var test = para.replaceChi ld(newSpan,span Elm);
}

</script>

....<HTML>
<tr id="FormTableRo w1">
<td width="107">För namn :</td>
<td width="388" id="ForenameCel l"> <INPUT Name="txtFirstN ame" Size=10
MaxLength=30 onkeypress="txt FirstNameUpdate ()">&nbsp;
<span id="FirstNameLe ngthLabel">Firs t label</span>
<td width="90">Efte rnamn :</td>
<td><INPUT Name="txtLastNa me" Size=20 MaxLength=30> </td>
</tr>
....<HTML>

Thanks for any help

David

Apr 28 '06 #1
7 2085
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.getEle mentById("First NameLengthLabel "); spanElm is
set to NULL.

<script language=javasc ript>

function txtFirstNameUpd ate()
{
var para = document.getEle mentById("Foren ameCell");
alert (para);
var spanElm = document.getEle mentById("First NameLengthLabel ");
alert (spanElm);
var newSpan = document.create Element("FirstN ameLengthLabel" );
alert (newSpan);
var newText = document.create TextNode("Next label");
alert (newText);
newSpan.appendC hild(newText);

var test = para.replaceChi ld(newSpan,span Elm);
}


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.getEle mentById("First NameLengthLabel "); spanElm is
set to NULL.

<script language=javasc ript>

function txtFirstNameUpd ate()
{
var para = document.getEle mentById("Foren ameCell");
alert (para);
var spanElm = document.getEle mentById("First NameLengthLabel ");
alert (spanElm);
var newSpan = document.create Element("FirstN ameLengthLabel" );
alert (newSpan);
var newText = document.create TextNode("Next label");
alert (newText);
newSpan.appendC hild(newText);

var test = para.replaceChi ld(newSpan,span Elm);
}


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.create Element("FirstN ameLengthLabel" );
newSpan.innerTe xt = "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.getEle mentById("First NameLengthLabel "); spanElm is
set to NULL.

<script language=javasc ript>

function txtFirstNameUpd ate()
{
var para = document.getEle mentById("Foren ameCell");
alert (para);
var spanElm = document.getEle mentById("First NameLengthLabel ");
alert (spanElm);
var newSpan = document.create Element("FirstN ameLengthLabel" );
alert (newSpan);
var newText = document.create TextNode("Next label");
alert (newText);
newSpan.appendC hild(newText);

var test = para.replaceChi ld(newSpan,span Elm);
}


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.create Element("FirstN ameLengthLabel" );
newSpan.innerTe xt = "New label text";


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

var spanElm = document.getEle mentById("First NameLengthLabel ");
spanElm.innerTe xt = "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.getEle mentById("First NameLengthLabel "); spanElm is
set to NULL.

<script language=javasc ript>
The language attribute is deprecated, type is required:

<script type="text/javascript">

function txtFirstNameUpd ate()
{
var para = document.getEle mentById("Foren ameCell");
alert (para);
var spanElm = document.getEle mentById("First NameLengthLabel ");
alert (spanElm);
var newSpan = document.create Element("FirstN ameLengthLabel" );
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.create Element("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.create TextNode("Next label");
alert (newText);
newSpan.appendC hild(newText);

var test = para.replaceChi ld(newSpan,span Elm);
That's OK, you've replaced the previous element 'FirstNameLengt hLabel'
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="FormTableRo w1">
<td width="107">För namn :</td>
<td width="388" id="ForenameCel l"> <INPUT Name="txtFirstN ame" Size=10
MaxLength=30 onkeypress="txt FirstNameUpdate ()">&nbsp;
<span id="FirstNameLe ngthLabel">Firs t label</span>


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

function txtFirstNameUpd ate()
{
var spanElm = document.getEle mentById("First NameLengthLabel ");
spanElm.innerHT ML = "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.getEle mentById(id);
if (el){
while (el.firstChild) {
el.removeChild( el.firstChild);
}
el.appendChild( document.create TextNode(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.create Element("FirstN ameLengthLabel" );
newSpan.innerTe xt = "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
6004
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 href="page3.php">Page 3</a></p> <p><a href="page4.php">Page 4</a></p> I want the link to be red if $nav has a value that corresponds to the page
15
13353
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 thumbnail, it changes the main image. Now, I would like to put an explanation (and date and some EXIF-info) to each photo so some text is shown next to the main photo when loaded. I don't know how to change the text without reloading the whole...
6
9559
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 generic solution. Thanks, Csaba Gabor from New York
9
6803
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 the the span element when I select the whole text in the SPAN and drag it. However, I want to drag it without have to select the words between the span element. The default mouse action will only select the words when i move the mouse. Can...
9
7067
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 the span tag itself contain table tags within it? I have some scripting code and when I wrap the span in table elements it does not find the html within the span. Here is an example.... <tr><td colspan="4" align="left"><span...
3
4683
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 doesn't. Is there a way I can find when a div increases its width in non-IE browsers? TIA, Mike
2
10050
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
2561
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 dojo for this, http://dojotoolkit.org, but this will end up on a production server, where dojo is not installed and cannot be installed. So, I need another solution. Can someone give some pointers on how this might be done? TIA
6
9277
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. In my javascript, i wrote document.getElementById('0_1').getElementsByTagName("span").setAttribute("className", "hasEvents"); However, i get the following error message:
0
8310
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8826
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8732
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8503
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8605
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6166
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5632
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
2726
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
1955
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.