循环在`onreadystatechange`中不起作用

Question

这是我的代码：

xmlhttp.onreadystatechange = function () {

              if (this.readyState == 4)

                  if( this.status == 200) {
                  response = xmlhttp.responseXML;
                  var channel = response.documentElement;
                  var title = channel.getElementsByTagName("title")[0].firstChild.nodeValue;

                  var parent =  document.getElementById("journalTitle");
                  parent.innerHTML = title;

                  var articleList = document.getElementById("articleList");

                  item = channel.getElementsByTagName("item");
                  var list = new Array();
                  itemSize = (channel.getElementsByTagName("item").length);
                  var i =0;
                  do{

                      list[i] = item[i].getElementsByTagName("title")[0].firstChild.nodeValue;

                      item = document.createElement("div");
                      item.innerHTML = list[i];
                      articleList.appendChild(item);
                      i++;


                  }while(i=itemSize);

                } 

size 变量是 22，当我写 alert(item[5].getElementsByTagName("title")[0].firstChild.nodeValue); 时，它会显示第五个元素，依此类推，但在循环内它只了解 item 的第一个元素，其余部分返回错误：

Uncaught TypeError: Cannot call method 'getElementsByTagName' of undefined

Answer 1

while 循环中的条件没有进行任何比较。这是一个定义，将i 的值设置为itemSize（根据OP 为22）。如果这不会导致脚本稍后出现错误，那么您将有一个无限循环，因为在while 的条件下22 被评估为true。

do...while 循环的主体总是至少执行一次。在第一轮，i 是0，你得到了预期的结果。然而，当第二轮开始时，i 等于22，因为它在while(i=itemSize) 中获得了一个新值。

getElementsByTagName() 返回一个类似数组的对象，它具有从零开始的索引，即item 中的最大索引是21。在第二轮循环中，您尝试使用undefined 的getElementsByTagName 方法（item[22].getElementsByTagName(...)...，这会导致错误消息。

循环中还有一个命名冲突（原来的 item 列表被替换为一个 DOM 元素），尽管这可能只是帖子中的一个错字。但是，如果要重命名变量，则索引问题仍然存在。

我建议你使用for 循环而不是do...while，以防万一item 中没有任何项目：

for (i = 0; i < itemSize; i++) {
    list[i] = item[i].getElementsByTagName("title")[0].firstChild.nodeValue;
    itemEl = document.createElement("div"); // renamed the variable
    itemEl.innerHTML = list[i];
    articleList.appendChild(itemEl);
}

Answer 2

xmlhttp.onreadystatechange = function () {

              if (this.readyState == 4)

                  if( this.status == 200) {
                  response = xmlhttp.responseXML;
                  var channel = response.documentElement;
                  var title = channel.getElementsByTagName("title")[0].firstChild.nodeValue;

                  var parent =  document.getElementById("journalTitle");
                  parent.innerHTML = title;

                  var articleList = document.getElementById("articleList");

                  item = channel.getElementsByTagName("item");
                  var list = new Array();
                  itemSize = (channel.getElementsByTagName("item").length);
                  var i =0;
                  do{

                      list[i] = item[i].getElementsByTagName("title")[0].firstChild.nodeValue;

                      item = document.createElement("div");
                      item.innerHTML = list[i];
                      articleList.appendChild(item);
                      i++;


                  }while(i=itemSize);

                } 
} /*<---missing bracket here*/

Answer 3

我发现我的问题太荒谬了。虽然 while 不正确，但 for 也不起作用。问题是我使用了具有相同名称的不同变量 item 。当我像这样更改代码时，问题就解决了：

xmlhttp.onreadystatechange = function () {

          if (this.readyState == 4)

              if( this.status == 200) {
              response = xmlhttp.responseXML;
              var channel = response.documentElement;
              var title = channel.getElementsByTagName("title")[0].firstChild.nodeValue;

              var parent =  document.getElementById("journalTitle");
              parent.innerHTML = title;

              var articleList = document.getElementById("articleList");

              item = channel.getElementsByTagName("item");
              var list = new Array();
              itemSize = (channel.getElementsByTagName("item").length);

              for (i = 0;i<itemSize;i++){

                  list[i] = item[i].getElementsByTagName("title")[0].firstChild.nodeValue;

                  itemD = document.createElement("div");
                  itemD.innerHTML = list[i];
                  articleList.appendChild(itemD);


              }

            } 
 }