IE8 and getElementById doesn't work well

Question

I already read some posts about IE8 causing trouble with getElementByID but couldn't find a workaround. My code looks like this right now:

<script type="text/javascript">
//<![CDATA[
  function settext(id) {
  switch(id) {
            case "0": document.getElementById('text').innerHTML="something";
            break;
            case "1": document.getElementById('text').innerHTML="again something";
            break;
            default: document.getElementById('text').innerHTML="something the third";
            break;
            }
   }
//]]>
</script><select style="width: 145px" onchange="settext(this.value)">
<option value="-1">something</option>
<option value="0">again</option>
<option value="1">and so on</option>
</select>
<table width="100%" border="0" cellspacing="0" cellpadding="5" id="text"></table>

It works fine with Firefox, Chrome and IE10. I'd be glad to get some help with this.

Thanks in advance!

As it stands this question cannot be answered. Please add the element with ID text to your code, in addition to the select menu, so users can help you. — pwdst, Aug 28 '14 at 20:18

score 0 · Accepted Answer · edited May 23 '17 at 10:25

0

On IE8 this.value is an issue but not getElementById . I think you are setting the innerHTML to a non text node.

Try this - it works for a text node.

UPDATE: You can't set value to a table's innerHTML, you should access to child cells or rows and change them like that :

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
  function settext(id) {
switch(id) {
            case "0":document.getElementById('text').rows[0].cells[0].innerHTML="something";
            break;
            case "1": document.getElementById('text').rows[0].cells[0].innerHTML="again something";
            break;
            default: document.getElementById('text').rows[0].cells[0].innerHTML="something the third";
            break;
            }
   }
</script>
</head>
<body>
<select style="width: 145px" onchange="settext(this.options[this.selectedIndex].value)">
<option value="-1">something</option>
<option value="0">again</option>
<option value="1">and so on</option>
</select>
<table width="100%" border="1" cellspacing="0" cellpadding="5" id="text"><tr><td></td></tr></table>
</body>
</html>

Related answers: https://stackoverflow.com/a/4729743/1960455

edited May 23 '17 at 10:25

Community

1
1

answered Aug 28 '14 at 19:42

Liam

2,837
23
36

Sadly it didn't help. – Kendel Aug 28 '14 at 19:48
1

when you say document.getElementById('text'), where is the element in your page with id "text" ? – Liam Aug 28 '14 at 19:50
gotcha, You can't set value to a table's innerHTML, you should access to child cells or rows and change them like that : – Liam Aug 28 '14 at 21:45
You might want to reference the the answer to [can't innerHTML on tbody in IE](http://stackoverflow.com/a/4729743/1960455) – t.niese Aug 28 '14 at 22:14
Yes! Thank you. That was my stupid mistake! It works perfect now. Thank you a lot for your time. – Kendel Aug 28 '14 at 22:20

IE8 and getElementById doesn't work well

1 Answers1