Re: Change the same span element all the time

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
.

Relevant Pages

  • Re: javascript equivalent for vbscript Date()-1
    ... Randy Webb wrote: ... var x = new Date; ... -1); alert(s); ... in several browsers. ...
    (comp.lang.javascript)
  • Ajax GET for URL fails
    ... that is, I don't see "here get" alert. ... xmlhttp = new XMLHttpRequest; ... var code = HO.readyState; ...
    (comp.lang.javascript)
  • Re: Ajax and javascript code response
    ... var which; ... alert('It works'); ... In response I get mixed content - HTML + Javascrpt. ... Problem is that on IE or Opera, javascript code isn't launched. ...
    (comp.lang.javascript)
  • Re: Please help me how to call this Javascript
    ... var fromDate = new Date; ... var toDate = new Date; ... if(diffDate < 0) ... alert("The start date cannot be after the end date!"); ...
    (microsoft.public.dotnet.framework.aspnet)
  • Re: Please help me how to call this Javascript
    ... Microsoft JScript runtime error: 'document.GetElementById.txtFromDate' ... var fromDate=new Date; ... if(diffDate < 0) ... alert("The start date cannot be after the end date!") ...
    (microsoft.public.dotnet.framework.aspnet)