Javascript doesn't work in IE8, but in IE9 and FF does

Question

I have this JS code:

<script type="text/javascript">

function start() {
    document.forms[0].username.focus();          
        var celdas;
        var tabla;
        tabla =  document.getElementById("tabla");
        celdas = tabla.getElementsByTagName("td");
        for (var i=0; i<celdas.length; i++) { 
            if (celdas[i].innerHTML == "<b>Please Login</b>"){
                celdas[i].innerHTML = "<b>Identificación de usuario</b>"
            }
            if (celdas[i].innerHTML == "<b>Name:</b>"){
                celdas[i].innerHTML = "<b>Nombre:</b>"
            }
            if (celdas[i].innerHTML == "<b>Password:</b>"){
                celdas[i].innerHTML = "<b>Contraseña:</b>"
            }
        }

        boton =  document.getElementById("login_button");
        boton.value="Entrar";
    }

    window.onload = start;
</script>

To this html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!--head, meta tags, body and other stuff--->

    <table class="list" id="tabla">
        <tr class="dark">
            <td colspan=2></td>
        </tr>
        <tr class="dark">
            <td colspan=2><b>Please Login</b></td>
        </tr>

   <!-- ETC ETC - more table stuff-->

The HTML pass the validation, and the JS works in Firefox and IE9, but not in IE8 even IE7. When I debug the JS step by step, I see that IE8 stops at here:

if (celdas[i].innerHTML == "<b>Password:</b>")

But do not enter this step:

celdas[i].innerHTML = "<b>Contraseña:</b>"

I'm not very fluent in JS, so, perhaps I'm doing a completely stupid n00b error... is my code right? Why it doesn't work?

http://stackoverflow.com/questions/1344470/why-is-document-getelementbyidtableid-innerhtml-not-working-in-ie8 — DarkBee, Jul 17 '13 at 10:15
@DarkBee In my case, is in a ``, which is not mencioned in the question you posted... — Arkana, Jul 17 '13 at 10:18
@HaseebAsif I have tried with `innerText` but still doesn't work. — Arkana, Jul 17 '13 at 10:19
Once you have to clear history in IE-8 and try again, hope issue may be due to history — Ghost Answer, Jul 17 '13 at 10:20
May be this will help http://www.jonefox.com/blog/2009/05/21/internet-explorer-and-the-innerhtml-property/ — Satpal, Jul 17 '13 at 10:21
Having problems with IE, and differences between its many versions, is normal and expected. — Rob, Jul 17 '13 at 10:31
@Rob I'm sure that someday we see a question like "My css/js works PERFECTLY in IE, what have I did wrong???" — Arkana, Jul 17 '13 at 10:35
It is better not to rely on innerHTML.. it's better to rely on class attribute of td and then do innerText to set the content. the innerHTML can give tags in capital letters.. it all depends on the browser.. — tgvrs santhosh, Jul 17 '13 at 10:35
@Arkana The web developer's mantra: "If it works in IE, but not the other browsers, my code is wrong." — Rob, Jul 17 '13 at 10:37
Thanks to all, yes, it was the `innerHTML`bug along with a cache problem. Finally I use @SatPal solution, please, can you post an answer with the code in Jon Fox's blog? For the rep ;) Is an excellent polyfill (don't know if "polyfill" is the appropiate word here) — Arkana, Jul 17 '13 at 11:01

score 1 · Accepted Answer · answered Jul 17 '13 at 11:07

Try this, I thinks its issue with innerHTML

function replace_html(el, html) {
    if( el ) {
        var oldEl = (typeof el === "string" ? document.getElementById(el) : el);
        var newEl = document.createElement(oldEl.nodeName);

        // Preserve any properties we care about (id and class in this example)
        newEl.id = oldEl.id;
        newEl.className = oldEl.className;

        //set the new HTML and insert back into the DOM
        newEl.innerHTML = html;
        if(oldEl.parentNode)
            oldEl.parentNode.replaceChild(newEl, oldEl);
        else
        oldEl.innerHTML = html;

        //return a reference to the new element in case we need it
        return newEl;
    }
};

Reference: http://www.jonefox.com/blog/2009/05/21/internet-explorer-and-the-innerhtml-property/

Javascript doesn't work in IE8, but in IE9 and FF does

1 Answers1