未捕获的类型错误：无法读取未定义的属性 0答案

【问题标题】：Uncaught TypeError: Cannot read property 0 of undefined未捕获的类型错误：无法读取未定义的属性 0
【发布时间】：2021-03-26 18:42:10
【问题描述】：

我正在尝试制作条形图分类器。单击按钮时，它将对条形图进行排序。但是当我运行排序功能时，它给了我这个错误。我已经尝试在我的文件中搜索拼写错误，因为这是其他答案所推荐的。

提前致谢。

这是我的 JS：

document.getElementById('sort').onclick = () => {
        setTimeout(function(){
              for (let i = 0; i < 8; i++) {
              let g = document.getElementsByClassName('bar');
              g[i].style.height = sort()[i]
              console.log(sort()[i])
        }},100)
}

function sort() {
    let array = [];
    for (let i = 0; i < 8; i++) {
        let g = document.getElementsByClassName('bar');
        array.push(parseInt(g[i].innerText));
        if (i >= 8) {
            return sortItems(array)
        }
    }
}

function sortItems(array) { 
    var length = array.length; 
  
      for(var i = 1, j; i < length; i++) { 
        var temp1 = array[i]; 
        for(var j = i - 1; j >= 0 && array[j] > temp1; j--) { 
          array[j+1] = array[j]; 
        } 
        array[j+1] = temp1; 
      } 
    return array; 
  }

这是我的 html：

<button id="regenerate">Regenerate</button>
    <button id="sort">Sort</button>
    <div class="bars">
        <div class="bar" id="bar1"><p class="barlabel"></p></div>
        <div class="bar" id="bar2"><p class="barlabel"></p></div>
        <div class="bar" id="bar3"><p class="barlabel"></p></div>
        <div class="bar" id="bar4"><p class="barlabel"></p></div>
        <div class="bar" id="bar5"><p class="barlabel"></p></div>
        <div class="bar" id="bar6"><p class="barlabel"></p></div>
        <div class="bar" id="bar7"><p class="barlabel"></p></div>
        <div class="bar" id="bar8"><p class="barlabel"></p></div>
    </div>
    <script src="index.js"></script>

【问题讨论】：

该错误包括它是由哪一行引起的。仔细观察那条线，它会帮助你找到问题所在。一般来说，您应该养成阅读错误以帮助调试的习惯，而不是略读它们。
我已经检查过了。我看不出有什么不对。 g[i].style.height = sort()[i]
再次检查错误并将其与您的代码进行比较。 i 为零，它试图读取未定义的数组的第零个元素。不是拼写错误，是代码执行时出现的错误。

标签： javascript bar-chart

【解决方案1】：

让我们看看sort()函数中的这个for循环：

for (let i = 0; i < 8; i++) {
        let g = document.getElementsByClassName('bar');
        array.push(parseInt(g[i].innerText));
        if (i >= 8) {
            return sortItems(array)
        }
}

它只在i >= 8 时返回一个数组，但循环本身只会迭代i < 8。这意味着 sort() 函数永远不会返回任何内容。

在这一行g[i].style.height = sort()[i] 中，您期望一个数组作为sort() 的返回值，但它实际上是undefined。只需使用console.log(typeof sort()) 进行证明即可。

【讨论】：