comp.lang.javascript archive
Re: Change the same span element all the time
Date: Sat Apr 29 2006 - 13:52:13 CEST
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()">
> <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));
}
}
-- RobReceived on Mon May 1 05:26:47 2006