3

I'd held off on posting here since I don't feel I have the skill level yet to give back to the community, but this one has me totally stumped.

I have a recursive JavaScript function that appends a counter to the end of all id and name elements in a node tree. The function works in FF, Chrome, Safari, and IE9, but not IE8.

function counterAppend(nodes,counter)
{
    var newField = nodes.childNodes;
    for (var i=0;i<newField.length;i++)
    {
        var theName = newField[i].name;
        if (theName)
        {
            newField[i].name = theName + counter;
        }
        var theId = newField[i].id;
        if (theId)
        {
            newField[i].id = theId + counter;
        }

        //recursive part
        if(newField[i].childNodes.length>0)
        {
            newField[i] = counterAppend(newField[i],counter);
        }
    }
    return nodes;
}

I get the error on the line: newField[i] = counterAppend(newField[i],counter);

In debug, it says: Breaking on JS runtime error - Object doesn't support this property or method

What is different between IE8 and the other browsers, and how can I modify this to work around the error?

7
  • Maybe this may help: forums.devshed.com/javascript-development-115/… Dec 14, 2012 at 20:19
  • 3
    it probably has something to do with the fact that childNodes gives you a NodeList, not an array.
    – jbabey
    Dec 14, 2012 at 20:21
  • I've got similar thoughts like @jbabey. Try to convert NodeList to an array. Here you can find examples. For IE8 for loop looks as the best option.
    – dreame4
    Dec 14, 2012 at 20:50
  • 2
    why do you have to reaffect the return of counterAppend? Apparently you only need to change the names and ids, therefore this affectation is optional.
    – Sebas
    Dec 14, 2012 at 20:51
  • @jbabey - don't I need a NodeList in case the tree I'm modifying is more than a layer deep?
    – JSP64
    Dec 14, 2012 at 22:12

2 Answers 2

1

Why are you assigning the return of the function back over the newField[i]? I have no idea what you expect this to do. If the code is just modifying the ids/names you shouldn't need a return value. I should think it is this that is confusing IE, I'm not sure why it isn't confusing the other browsers...

1
  • Works! Thanks. I didn't realize the function was affecting the original variable, vs. creating another local variable with the same name.
    – JSP64
    Dec 15, 2012 at 16:29
0

Questions: Also, have you checked when you receive the error? How many times do you loop, if any at all, before you receive the error? Try some output statements.

Some alternative algorithms for walking the DOM: getElementsByTagName() equivalent for textNodes

Keep in mind you might be running into issues such as the below.

IE doesn't include white-space-only text nodes in the childNodes nodeList like other browsers do. I suggest you use getElementsByTagName() instead. That way you also don't have to traverse every level of nodes manually in your code.

via http://www.quirksmode.org/dom/w3c_core.html

Most browsers will correctly view the blank space between tags as a text node containing only white space characters (such as space, line-break or tab), even if the blank space is not rendered, such as a gap in between a tag and a tag or a blank gap in between

tags. However, some browsers (mainly Internet Explorer 8-, and 9+ in quirks mode) will not view this empty space as a text node at all.

via http://www.howtocreate.co.uk/tutorials/javascript/dombasics

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.