未捕获类型错误：无法读取未定义的属性'checked'

Question

所以，我正在制作一个进度条，它显示选中的复选框的数量。但是有一个错误"Uncaught TypeError: Cannot read property 'checked' of Undefined "。我一直在尝试各种方法，但错误仍然存在。这是我的JS文件:

function updateProgress() {
      var i = 0;
      var checkAmt = 0;
      var checkedAmt = 0;
      while (i <= document.getElementsByClassName("gun-check").length) {
      if (document.getElementsByClassName("gun-check")[i].checked == "true") {
             checkAmt = checkAmt + 1;
        } 
        i = i + 1;
      }
    document.getElementById("progress-fill").style.width = (100 / 31) * checkAmt + "%";
    if ((100 / 31) * checkAmt > 5) {
        document.getElementById("progress-text").innerHTML = (100 / 31) * checkAmt + "%"; 
    }
}

请帮忙!

Answer 1

问题是当i = document.getElementsByClassName("gun-check").length时，索引将越界。

改变这一行:

while (i <= document.getElementsByClassName("gun-check").length) {

:

while (i < document.getElementsByClassName("gun-check").length) {

---

另外，正如@HuyNguyen在评论中指出的，当检查document.getElementsByClassName("gun-check")[i].checked的布尔值时，你应该检查true(布尔值)，而不是"true"(字符串)。