Question

What is wrong with this code?

var divarray = [];
var articleHTML = [];
var absHTML;
var keyHTML;
var bodyHTML = [];
var i = 0;
divarray = document.getElementById("yui-main").getElementsByTagName("div");
for ( var j in divarray) {
    if(divarray[i].className == "articleBody"){
        articleHTML = divarray[i];
        for( var k in articleHTML ){
            bodyHTML[i] = '';
            if(articleHTML[i].className == "issueMiniFeature"){continue;}
            if(articleHTML[i].className == "abstract"){absHTML = articleHTML[i]; continue;}
            if(articleHTML[i].className == "journalKeywords"){keyHTML = articleHTML[i]; continue;}
            bodyHTML[i] = articleHTML[i];
        }
        break;
    }
    i++;
}

The error I get is:

TypeError: Cannot read property 'className' of undefined

I am using Google Chrome.

Answer 1

You’re using a very strange loop.

 for (var j in array) {
    // use array[i]
    ++ i
 }

The problem is .getElementsByTagName doesn’t return an array, but an array-like interface. For example:

>>> for (var j in document.getElementsByTagName('body')) console.log(j)
0
length
item
namedItem

Therefore, in your for/in loop, i will go up to array.length + 2 instead of array.length - 1. Since array[array.length + 2] does not exist, it will return undefined and throw the error when you try to access a property of it.

---

Just always use

for (var i = 0, len = array.length; i < len; ++ i) {
  ...
}

with arrays.