Compare text with innerHTML IE7 problem

Question

I can't find a work around for the innerHTML bug in IE7. I need to look at the contents of dynamicly generated HTML and change it if the text is "-1". I'm using the prototype js gallery but couldn't find a fix. Any ideas?

JS:

<script language="javascript" type="text/javascript">
    Event.observe(window, 'load', function () {
    var num = 1;
    var allAccountInfoItems = $A('accountInfoItem');
    var numofElements = (allAccountInfoItems.length);

    for (var x = 0; x < numofElements; x++ )
    {
        var oldHTML = $('accountInfo').innerHTML;
        var newHTML = "Unlimited";

        if (oldHTML == "-1")
        {
            $('accountInfo').update(newHTML);  
        }

        var oldId = $('accountInfo').id;
        var numPlus = num++;

        $('accountInfo').id = oldId + numPlus;
    }

});
</script>

Answer 1

Did you try trimming whitespace? You may have whitespace text nodes around the textual content.

$('accountInfo').innerHTML.strip()

If that doesn't work, just try alert(oldHTML) to see what the value you are getting really is.

---

Sidenote: you realize $A('accountInfoItem') results in ["a", "c", "c", "o", "u", "n", "t", "I", "n", "f", "o", "I", "t", "e", "m"] ? Is this intentional?

Answer 2

$A transforms anything to an array. I think you wanted to use $$() with a CSS selector in it. In your case, it would be

$$('.accountInfoItem');

The dot is because it may be a list of elements with accountInfoItem as class name.

Answer 3

The proper (DOM friendly) way to get innerHTML is element.childNodes[0].textContent

So, in your code, it would be:

var oldHTML = $('accountInfo').childNodes[0].textContent;

You'll probably want to strip the string as Roatin mentioned, to be sure you have only the text.

var oldHTML = $('accountInfo').childNodes[0].textContent.strip();