javascript - 如何在 for 循环中将 textContent 修复为未定义？

Question

当我运行下面的代码时，它显示“无法读取未定义的属性‘textContent’”。甚至 onclick、addEventListener、length 等等都说未定义!我该如何解决这个问题？

代码如下:

<div id = "dropdown-content" class = "d-con">
    <a href = "#">America</a>
    <a href = "#">Canada</a>
    <a href = "#">Rio</a>
</div>

和 javaScript:

(function(){
    var i;
    var dropdown = document.getElementsByClassName('d-con');
    for(i = 0; i <= dropdown.length; i = i + 1){
        alert(dropdown[i].textContent);
    }
}()); 

Answer 1

这里你唯一的问题是你的 i柜台到达dropdown.length和 dropdown[dropdown.length]是undefined ，换句话说，您正在尝试访问 undefined dropdown 中的元素大批。

这就是为什么您的代码在尝试访问此 undefined 时警告前 3 个元素然后抛出错误的原因元素。

解决方案:

在for循环你的条件应该是i < dropdown.length而不是 i <= dropdown.length .

(function() {
  var i;
  var dropdown = document.getElementsByClassName('d-con');
  for (i = 0; i < dropdown.length; i++) {
    alert(dropdown[i].textContent);
  }
}());

演示:

(function() {
  var i;
  var dropdown = document.getElementsByClassName('d-con');
  for (i = 0; i < dropdown.length; i++) {
    alert(dropdown[i].textContent);
  }
}());

<div id="dropdown-content" class="d-con">
  <a href="#">America</a>
  <a href="#">Canada</a>
  <a href="#">Rio</a>
</div>