inlineHTML IE 8

Question

I'm a javascript noobie - struggling with some cross platform issues :-) The attached code works fine in Firefox / Safari etc but of course not in IE 8

It should be a simple disclosure. The show/hide div works fine, it is just the text that does not change to show the new state.

I know that it is an issue with the innerHTML - but I do NOT know how to fix it ...

Please help... been bashing my head against this particular wall since yesterday.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
        <style type="text/css">
            body { border: 0px; }
            *{ font: 11px \Lucida Grande\, Verdana, sans-serif; }
            table { width:100% ; border: 0px ; border-spacing: 0px ; table-layout: fixed ; }
            td { border: 0px }
            .values { vertical-align:text-top }
            .labelGreen { font-weight:bold ; color: #008000 ; } 
            td.auto { width:auto; } 
            .empty { margin:auto }
            ul { list-style: none; margin: 0; padding: 0;} 
            a { color: #888; text-decoration: none; font-weight: bold; font-size: 10px; }
        </style>
        <script type="text/javascript">
            function toggle_visibility1(id)
            {
                var e = document.getElementById(id);
                if (e.style.display == "none")
                {
                    e.style.display = "block";
                    document.getElementById("triOpen1").innerHTML = "<a href="javascript:openTri()">Close</a>";
                }
                else {
                    e.style.display = "none";
                    document.getElementById("triOpen1").innerHTML = "<a href="javascript:cloTri()">Open</a>";
                }
            }
        </script>
        <title></title>
    </head>
    <body>
        <table>
            <tr>
                <td class="auto" colspan ="4">These entities, related to THIS Methodology, are already included in this Model Extract</td>
            </tr>
            <tr>
                <td class="labelGreen"><a href="#tri" onclick="toggle_visibility1('tri1');"><span id="triOpen1">Open</span></a>&nbsp;ABBS 5 </td>
                <td class="labelGreen">Devices 15</td>
                <td class="labelGreen">Processes 2</td>
                <td class="labelGreen">Tests 13</td>
            </tr>
        </table>
        <div id="tri1" style="display:none;">
            <table>
                <tr>
                    <td class="values">Abbs List to go here</td>
                    <td class="values">Dev List to go here</td>
                    <td class="values">Process List to go here</td>
                    <td class="values">Testing List</td>
                </tr>
            </table>
        </div>
    </body>
</html>

In future, you might consider using something like http://www.freeformatter.com/ to make your code more readable. — CodingIntrigue, Jan 29 '14 at 12:31
this would be much easier if you'd use a library such as jQuery.. — Andre Figueiredo, Jan 29 '14 at 15:01
Indeed it would - but it's a solution that does not allow for external calls / external files... — user2634091, Jan 30 '14 at 09:16

score 0 · Answer 1 · answered Jan 29 '14 at 12:46

There's an error in JavaScript innerHtml new string.

JavaScript is understanding the new string to this point:

document.getElementById("triOpen1").innerHTML = "<a href="

after this, it takes

javascript:openTri()">Close</a>"

as an unknown code instruction.

Try this:

            if (e.style.display == "none")
            {
                e.style.display = "block";
                document.getElementById("triOpen1").innerHTML = '<a href="javascript:openTri()">Close</a>';
            }
            else {
                e.style.display = "none";
                document.getElementById("triOpen1").innerHTML = '<a href="javascript:cloTri()">Open</a>';
            }

Thanks - but that is not the problem ... I did try it, but it did not work - by which I mean - it still works in Firefox / Safari - but not in IE 8 — user2634091, Jan 29 '14 at 12:56

score 0 · Accepted Answer · edited May 23 '17 at 11:56

Try to use innerText instead.

     function toggle_visibility1(id)
        {
            var e = document.getElementById(id);
            if (e.style.display == 'none')
            {
                e.style.display = 'block';
                document.getElementById('triOpen1').innerText = "Close";
            }
            else {
                e.style.display = 'none';
                document.getElementById('triOpen1').innerText = "Open";
            }
        }

It seems related to this SO: Why is document.getElementById('tableId').innerHTML not working in IE8?

innerText is a simple solution if one does not want to append html to existing content. If one would like to add html then this kind of solution me be apropriate:

 function toggle_visibility1(id)
        {
            var e = document.getElementById(id);
            if (e.style.display == 'none')
            {
                e.style.display = 'block';

                switchElementContent('triOpen1','<a href="javascript:openTri()">Close</a>');
            }
            else {
                e.style.display = 'none';

                switchElementContent('triOpen1','<a href="javascript:cloTri()">Open</a>');
                container.appendChild(newdiv);
            }
        }

 function switchElementContent(elementId, newContent) 
        {
            var container = document.getElementById(elementId);
            container.innerText = '';
            var newdiv = document.createElement("div");
            newdiv.innerHTML = newContent;
            container.appendChild(newdiv);
        }

This second option is based on this SO: https://stackoverflow.com/a/9000029/3020903

Hi there - excellent - I did not NEED that a href after all - innerText worked fine - I did try innerText before but it still had the a href which of course showed up...many thanks indeed — user2634091, Jan 29 '14 at 13:22
BUT - I still need to use innerHTML because 1) It needs to be cross platform, and 2) I do not need the href , but I do need some HTML characters — user2634091, Jan 29 '14 at 13:35
@user2634091 I edited my answer. Maybe now you can find something more useful from there. — Tarmo, Jan 29 '14 at 13:52

inlineHTML IE 8

2 Answers2