CODEWITHSUNDEEP
javascript
ZA.
ZA.

Reputation: 10477

document.getElementById().innerHTML fails with 'Unknown Error' in IE

I'm trying to use document.getElementById().innerHTML in a JavaScript to change information in a webpage. On FireFox this works as described in the W3C documentation, however, the same method returns 'Unknown Error' in IE. The 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 a MouseOver event like this:

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

The script would combine ID with a - and then ROW, which, in this example would be, thetag-1. The exact tag does exist in the html document. Using getElementById with the hardcoded tag name, reveils the same error, and the variable method is the prefered one in this situation.

To questions regarding why full html table information is in ntext, for whatever reason nested ID's fail on both FireFox and IE, even though the W3C specification states it should work (obviously both browsers have not fully implimented the W3C specs as persceribed). If someone knows of the way to access and change nested ID's, that works in both FireFox and IE, I'd sure like to know it.

Additionally, as yet I'm only getting this 'Unknown Error' in IE when using innerHTML to change the information. Reading works without error.

Can someone point out where my scripting error is so that I can swap text 'messages' on mouseover events.

Upvotes: 0

Views: 7135

Answers (4)

givanse
givanse

Reputation: 14943

"Additionally, as yet I'm only getting this 'Unknown Error' in IE when using innerHTML to change the information. Reading works without error."

I faced 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

Upvotes: 1

epascarello
epascarello

Reputation: 207501

IE does not let you add.alter table rows that way. You will need to use DOM Methods removeChild, appendChild, and createElement OR insertRow and insertCell

Upvotes: 2

TheVillageIdiot
TheVillageIdiot

Reputation: 40497

Please give jQuery a chance. It very nicely abstracts the browser idiosyncrasies. download latest jquery from jQuery Site and following will suffice:

<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>

Upvotes: 0

David Hedlund
David Hedlund

Reputation: 129792

as for getting rid with the ntext, you could do something like

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

If it's the getElementById part that's not working, you'll still be out of luck, though. Try:

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

alert(test);

To find out if the object is even found, as to figure out whether you're getting an error because you're trying to access innerHTML on a null error, or if it's actually setting innerHTML that doesn't work. The latter seems probable to me, in which case the proposed solution might help.

Upvotes: 0

Related Questions