Проблема с фильтрацией в JavaScript
var human = document.getElementById("human");
var ul = document.getElementById('menuUL');
var li = ul.getElementsByTagName('li');
var a;
human.onkeyup = function() {
var filter = human.value;
for(var i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if(a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = '';
}
else {
li[i].style.display = 'none';
}
}
}<div id="sorting">
<input type="text" id="human" placeholder="Имя">
<ul id="menuUL">
<li class="header">A</li>
<li><a href="#">Aндрей</a></li>
<li><a href="#">Алексей</a></li>
<li><a href="#">Альдус</a></li>
<li class="header">Б</li>
<li><a href="#">Бахангин</a></li>
<li><a href="#">Борис</a></li>
<li><a href="#">Братислав</a></li>
<li class="header">В</li>
<li><a href="#">Валентин</a></li>
<li><a href="#">Володимир</a></li>
<li><a href="#">Вадим</a></li>
</ul>
</div>При вводе в input текст для фильтрации выводиться ошибка
Вот, исправил ваш код, вроде всё работает.
UPD: плюс я исправил ещё ваши косяки :
var filter = human.value.toUpperCase();
Нужно было так создать filter, что бы поиск работал правильней.
А сама ошибка, нужно было добавить if
if(a){
...Ваш код..
} human.onkeyup = function() {
var human = document.getElementById("human");
var ul = document.getElementById('menuUL');
var li = ul.getElementsByTagName('li');
var a;
var filter = human.value.toUpperCase();
for(var i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if(a){
if(a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
}
else {
li[i].style.display = "none";
}
}
}
}<div id="sorting">
<input type="text" id="human" placeholder="Имя">
<ul id="menuUL">
<li class="header">A</li>
<li><a href="#">Aндрей</a></li>
<li><a href="#">Алексей</a></li>
<li><a href="#">Альдус</a></li>
<li class="header">Б</li>
<li><a href="#">Бахангин</a></li>
<li><a href="#">Борис</a></li>
<li><a href="#">Братислав</a></li>
<li class="header">В</li>
<li><a href="#">Валентин</a></li>
<li><a href="#">Володимир</a></li>
<li><a href="#">Вадим</a></li>
</ul>
</div>разберем текскт ошибки:
{
"message": "Uncaught TypeError: Cannot read property 'innerHTML' of undefined",
"filename": "https://stacksnippets.net/js",
"lineno": 38,
"colno": 7
}В тексте ошибки нам говорится, что мы не можем обратиться к свойству innerHTML на неопределенном объекте(другими словами данного объекта не существует).
и даже указана строка, в которой произошла ошибка
if(a.innerHTML.toUpperCase().indexOf(filter) > -1) {соответственно, в каком-то случае a у нас может быть неопределенно.
Для начала ответим на вопрос: что такое a
a = li[i].getElementsByTagName("a")[0];a - это ссылка внутри тега <li>
проблема в том, что НЕ В КАЖДОМ <li>...</li> есть ссылка
например
<li class="header">Б</li>Соответственно,когда вы пытаетесь обратиться к ссылке внутри данного пункта списка, происходит ошибка, т.к. вы пытаетесь обратиться к объекту которого нет.
Что делать?
ответ простой:
поставить проверку перед тем как обращаться к данной переменной:
if (typeof a != 'undefined'){
//...
}В Вашем случае удобнее будет использовать условие от противного и наоборот пропустить даную итерацию цикла, если данный элемент неопределен: то есть:
if(typeof a == 'undefined')
continue;И как справедливо заметил Alisher Yerkimbekov, у Вас недочёт в строке:
var filter = human.value;Ошибка в том, что текст ссылок при проверке у Вас приводится к верхнему регистру, в то время как текст, который вы вводите остаётся без изменений. Для корректного поиска его стоит тоже привести к верхнему регистру
var filter = human.value.toUpperCase();В ИТОГЕ:
var human = document.getElementById("human");
var ul = document.getElementById('menuUL');
var li = ul.getElementsByTagName('li');
var a;
human.onkeyup = function() {
var filter = human.value.toUpperCase();
for(var i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if(typeof a == 'undefined')
continue;
if(a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = '';
}
else {
li[i].style.display = 'none';
}
}
}<div id="sorting">
<input type="text" id="human" placeholder="Имя">
<ul id="menuUL">
<li class="header">A</li>
<li><a href="#">Aндрей</a></li>
<li><a href="#">Алексей</a></li>
<li><a href="#">Альдус</a></li>
<li class="header">Б</li>
<li><a href="#">Бахангин</a></li>
<li><a href="#">Борис</a></li>
<li><a href="#">Братислав</a></li>
<li class="header">В</li>
<li><a href="#">Валентин</a></li>
<li><a href="#">Володимир</a></li>
<li><a href="#">Вадим</a></li>
</ul>
</div>
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
- Почему SERVER_ADDR имеет не тот IP 47929 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30568 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23909 visits
- Как через css изменить цвет png изображения? 10406 visits
- Blob video url download 10006 visits
- Php curl запрос через прокси с авторизацией 9281 visits
- Работа с captcha vk api 8149 visits
![Как заключить обширный html в переменную? [дубликат]](https://hostciti.net/images/nophoto.png "Как заключить обширный html в переменную? [дубликат]")
© "hostciti.net" 30.3.2025 | 00:43