Document.getElementById (). innerHTML does not work with "Unknown error" in IE

Question

I am trying to use document.getElementById (). innerHTML in JavaScript to modify information on a web page. In FireFox, this works as described in the W3C documentation, however the same method returns an "Unknown Error" in IE. JavaScript looks like this:

function Change_Info (ID, ROW, VALUE) { if (document.getElementById) { var ntext = "<td width=4\% bgcolor=#FFFFFF>&nbsp;</td><td width=92\% bgcolor=#FFFFFF colspan=2><font face=Arial size=2 color=#5578C4>" + VALUE + "</font></td><td width=4\% bgcolor=#FFFFFF><center>&nbsp</center></td>"; document.getElementById( ID + "-" + ROW).innerHTML = ntext; return false; } } 

The script is called by the MouseOver event as follows:

 onmouseover='Change_Info("thetag","1","Some Info"); 

The script will combine the identifier with - and then ROW, which in this example will be, thetag-1. The exact tag exists in the html document. Using getElementById with a hard tag name detects the same error, and the variable method is preferred in this situation.

On the question of why the full html table information is in ntext, for some reason the nested identifiers do not work in both FireFox and IE, although the W3C specification states that it should work (obviously, both browsers did not fully enter the specifications W3C as persceribed) If someone knows about a way to access and change nested identifiers that works in both FireFox and IE, I would definitely like to know.

Also, while I only get this "Unknown error" in IE when using innerHTML to change the information. Reading works without errors.

Can anyone please indicate where my error is in the script so that I can swap text "messages" for mouseover events.

Answer 1

IE does not allow you to add table tables. You will need to use the DOM methods removeChild, appendChild and createElement OR insertRow and insertCell

Answer 2

"Also, while I am only getting this" Unknown error "in IE when using innerHTML to change information. Reading works without errors."

I ran into the same problem and used the following:

 var newdiv = document.createElement("div"); newdiv.innerHTML = "new content"; var container = document.getElementById("container"); container.removeChild( container.firstChild ); container.appendChild(newdiv); 

http://domscripting.com/blog/display/99

Answer 3

As for getting rid of ntext, you can do something like

document.getElementById (ID + '-' + ROW) .getElementsByTagName ('font') [0] .innerHTML = VALUE;

If this is the getElementById part that is not working, you will still be out of luck. Try:

var test = document.getElementById (ID + '-' + ROW);

alerts (test);

To find out if an object is found even if you get an error message because you are trying to access innerHTML with a zero error or if it really sets innerHTML, that doesn't work. The latter seems to me probable, and in this case the proposed solution can help.

Answer 4

Please give jQuery a chance. This very nicely abstracts the features of the browser. download the latest jquery from the jQuery site and do the following:

 <script type="text/javascript" src="path/to/jquery"></script> <script type="text/javascript"> function Change_Info (ID, ROW, VALUE) { if (document.getElementById) { var ntext = "<td width=4\% bgcolor=#FFFFFF> </td><td width=92\% bgcolor=#FFFFFF colspan=2><font face=Arial size=2 color=#5578C4>"+ VALUE+ "</font></td><td width=4\% bgcolor=#FFFFFF><center>&nbsp</center></td>"; $("#" + ID + "-" + ROW).html(ntext); return false; } </script> <script type="text/javascript"> $(document).ready(function(){ $("# ID OF YOUR ELEMENT").mouseover(function(){ Change_Info("thetag","1","Some Info"); }); }); </script>