Блог

Главная - Вопросы по программированию - Неперехваченная ошибка типа: не удается прочитать свойство 0 неопределенного

Неперехваченная ошибка типа: не удается прочитать свойство 0 неопределенного

#javascript #bar-chart

#javascript #гистограмма

Вопрос:

Я пытаюсь создать сортировщик гистограмм. При нажатии кнопки он отсортирует гистограмму. Но когда я запускаю функцию сортировки, она выдает мне эту ошибку. Я попытался выполнить поиск в моем файле на наличие опечаток, так как это было рекомендовано в других ответах.

Заранее спасибо.

Вот мой 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 amp;amp; 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>

Комментарии:

1. Ошибка включает в себя, какой строкой она была вызвана. Посмотрите внимательнее на эту строку, это поможет вам найти проблему. В общем, вы должны привыкнуть читать ошибки, чтобы помочь отладке, а не просматривать их.

2. Я проверил. Я не вижу ничего плохого. g[i].style.height = sort()[i]

3. Проверьте ошибку еще раз и сравните ее с вашим кодом. i равно нулю, и он пытается прочитать нулевой элемент массива, который не определен. Это не опечатка, это ошибка, которая возникает при выполнении кода.

Ответ №1:

Давайте посмотрим на этот цикл for в функции sort():

 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()) помощью .