Я создаю небольшое приложение toDo и хочу, чтобы мои пользователи могли искать элементы toDo с помощью клавиш со стрелками: Приложение ToDo и список, которые я хотел бы go просмотреть со стрелками в верхнем правом углу.
Мой код работает, но не так, как я задумал, так как он случайным образом перебирает элементы списка, но я не понимаю, почему это происходит.
<div class="col-md-6 align-self-center">
<input type="text" class="form-control" id="filter" placeholder="Search Items...">
<ul id="filter-ul">
</ul>
</div>
Вот мой код html, о котором идет речь, просто текстовое поле для моего поискового запроса и ul под ним. Но я думаю, что есть проблема в моем JS коде:
let filter = document.getElementById("filter");
filter.addEventListener("keyup", navigateThroughList);
function navigateThroughList() {
let firstItem = filterList.firstElementChild;
// firstItem.focus();
document.addEventListener("keydown", function(e) {
switch (e.key) {
case "ArrowUp":
if (document.activeElement == (filter || firstItem)) {
filterList.lastElementChild.focus();
} else {
document.activeElement.previousSibling.focus();
}
break;
case "ArrowDown":
if (document.activeElement == filter) {
firstItem.focus();
} else {
if(document.activeElement.nextSibling==null){
firstItem.focus();
}
document.activeElement.nextSibling.focus();
}
break;
}
});
}
Как я понял из нескольких моих ошибок, это как-то связано с тем, что в моем поле ввода отсутствуют элементы одного уровня, но я защищен Я сам из-за условий в скобках {} или около того, чему я учил: ошибка в вопросе
Это сводит меня с ума, потому что логически все выглядит хорошо, я упускаю что-то очевидное, вероятно, как Я новичок в JavaScript. Любая помощь очень ценится. Заранее спасибо !!