Dynamic HTML using innerHTML 1

[BillyKrow]

I have the following function that will dynamically change and email address based on the id of a table data tag.

function changeEmail (id,email)
{
var elements=document.all;

//loop through all the elements
for(i=0; i<elements.length; i++)
{
if (elements.id == id)
elements.innerHTML=&quot;<a href=\&quot;mailto:&quot;+email+&quot;\&quot;>&quot;+email+&quot;</a>&quot;;
}
}

The problem with this is that for some reason it can take several seconds to loop through all the elements on a page. I then realized that you can substitute the element address in elements with the id itself. So the following will give you the current email address tag.

elements[id].innerHTML

but oddly enough what worked above does not work here:

elements[id].innerHTML = &quot;<a href=\&quot;mailto:&quot;+email+&quot;\&quot;>&quot;+email+&quot;</a>&quot;

This whole issue could be resolved easily if you could use a href in an <input> then just do something like document.forms[0].field.value = new address. But since you can't do this you are forced to use innerHTML.
Any ideas why this would not work or another way to quickly change data on a page that is not a form input.

 

[BillyKrow]

Strange, it took my and thought it meant put everything that follows in italics. Here it is again.

I have the following function that will dynamically change an email address based on the id of a table data tag.

function changeEmail (id,email)
{
var elements=document.all;

//loop through all the elements
for(j=0; j<elements.length; j++)
{
if (elements[j].id == id)
elements[j].innerHTML=&quot;<a
href=\&quot;mailto:&quot;+email+&quot;\&quot;>&quot;+email+&quot;</a>&quot;;
}
}

The problem with this is that for some reason it can take several seconds to loop through all the elements on a page. I then realized that you can substitute the element address in elements[j] with the id itself. So the following will give you the current email address tag.

elements[id].innerHTML

but oddly enough what worked above does not work here:

elements[id].innerHTML = &quot;<a href=\&quot;mailto:&quot;+email+&quot;\&quot;>&quot;+email+&quot;</a>&quot;

This whole issue could be resolved easily if you could use a href in an <input> then just do something like document.forms[0].field.value = new address. But since you can't do this you are forced to use innerHTML.
Any ideas why this would not work or another way to quickly change data on a page that is not a form input.

 

[Targol]

did you try that :

function changeEmail (id,email)
{
   var elements=document.getElementById(id);
   elements.innerHTML=&quot;<a  href=\&quot;mailto:&quot;+email+&quot;\&quot;>&quot;+email+&quot;</a>&quot;;
}

I think this should work fine and faster !!! Water is not bad as long as it stays out human body ;-)

 

[Targol]

The italic is due to TGML Features : it's text formatting language used within Tek-tips. In this language, a is used to start italics while a stops it. If you can see theses codes and no italics, it's because I unchecked the &quot;Process TGML&quot; check box under post writing textarea. Water is not bad as long as it stays out human body ;-)

 

[BillyKrow]

I didn't even know about the getElementById function. This is exactly what I need. However I am still getting a &quot;Unknown runtime error&quot; when I try to set the innerHTML. I love these errors. There so helpful. Any ideas?

 

[xutopia]

use a Gecko based browsers like Mozilla, Netscape or Phoenix to do your testing. The javascript console provides beter error messages are much more helpful and detailed (they also don't give you the wrong line number like IE does). Gary

http://www.xutopia.com

Haran

 

[Targol]

Your error is du to the fact that you try to add a tag with behavior. This can't be done this way. Try that instead :

function changeEmail (id,email) {
   var o_TD=document.getElementById(id);
   // creating Anchor Element
   var o_Anchor = document.creatElement("A");
   o_Anchor.href= "mailto:" + email;
   o_Anchor.innerHTML = email
   // Deleting old TD content
   o_TD.innerHTML="";
   // adding Anchor in TD
   o_TD.appendChild(o_Anchor);
}

Water is not bad as long as it stays out human body ;-)

 

[BillyKrow]

After fixing a couple typos and getting it to run I still get an unknown runtime error at the innerHTML line again.

 

[xutopia]

billy,

Show us your updated code! Gary

http://www.xutopia.com

Haran

 

[BillyKrow]

Finally! The problem was do to the fact that I had hidden fields that had the same name as the id name on the table tag. When I removed these hidden fields, what was posted in the 3rd post worked fine. Unusual problem since id and name are separate fields. I'm guessing the getElementById function actually gets elements by id or name. This also explains why when I looped through the elements and actually checked the id it worked fine.

 

[xutopia]

and ID is an identification. If everyon has the same name how can you see them apart? Gary

http://www.xutopia.com

Haran

 

[BillyKrow]

The difference:

<input type=&quot;text&quot; name=&quot;fieldName&quot;>

<td id=&quot;idName&quot;>

There better be a difference between id and name considering a input tag can also have an id:

<input type=&quot;text&quot; name=&quot;fieldName&quot; id=&quot;idName&quot;>

Bottom line is that it worked when I looped through all the elements and checked the ID but does not work when I use the getElementById method. So there is a problem but can easily be avoided by using different names.