Невозможно установить свойство 'OnClick' неопределенной

Question

HTML:

<form class="hotels-filters"> 
    <div role="radio" aria-checked="false" tabindex="1" id="all" class="hotel-filter hotel-filter-reset hotel-filter-active">Reset filters</div> 
    <div role="radio" aria-checked="false" tabindex="1" id="expensive-first" class="hotel-filter hotel-filter-dropdown">Expensive first</div> 
    <div role="radio" aria-checked="false" tabindex="1" id="stars" class="hotel-filter hotel-filter-dropdown">Start from 2</div> 
    <div role="radio" aria-checked="false" tabindex="1" id="min-rating" class="hotel-filter hotel-filter-dropdown">Not under 6</div> 
    <div role="radio" aria-checked="false" tabindex="1" id="distance" class="hotel-filter hotel-filter-dropdown">Close to me</div> 
    <div role="radio" aria-checked="false" tabindex="1" id="favorites" class="hotel-filter">Favorites</div> 
</form> 

JS:

var filters = document.querySelectorAll('.hotel-filter'); 
for (var i = 0; i <= filters.length; i++) { 
    filters[i].onclick = function(evt) { 
    var clickedElementID = evt.target.id; 
    setActiveFilter(clickedElementID); 
    }; 
} 

Browser выделяет эту часть кода

= function(evt) { 

и говорит мне «Uncaught TypeError: не могу set property 'onclick' of undefined "

Answer 1

Вам нужно обновить условие цикла for, иначе, на последней итерации это будет undefined, так как индекс за пределами допустимого диапазона (максимальный индекс filters.length - 1, а последний индекс будет filters.length). Ошибка выбрасывается, потому что на последней итерации вы пытаетесь установить свойство onclick на undefined, что невозможно.

i < filters.length 

Answer 2

Итератор достигает одного числа больше количества элементов. Вот правильная итерация var filters = document.querySelectorAll ('. Hotel-filter');

for (var i=0; i < filters.length; i++) { 

     filters[i].onclick = function(evt) { 
     var clickedElementID = evt.target.id; 
     setActiveFilter(clickedElementID); 
    }; 
    }