Как с помощью JS составить массив значений из атрибута title элементов div определенных пользовательских CSS классов?

Рейтинг: 1Ответов: 1Опубликовано: 04.03.2023

Я специализируюсь на python-бэкенд разработке. Но сейчас делаю свой первый full-stack проект, поэтому только начинаю изучать JS.

Суть задачи: есть список дивов с классом username-card. Первая подзадача: проверить , существует ли, введенное пользователем значение в массиве атрибутов title всех дивов класса. Если не существует - вернуть ошибку. Если существует, то решается вторая подзадача: скрыть все дивы, которые не соответствуют введенному пользователем значению.

Условие отсутствия username в массиве срабатывает. А вот цикл перебора элементов и скрытия ненужных карточек - нет. По отдельности обе функции работают. Не могу понять, что не так.

Вот мой JS код:

function showSearchedUserCard() {
    const username = document.getElementById("inputSearchUserCards").value
    const divList = document.querySelectorAll('.username-card');
    const titles = []
    divList.forEach(el => {
        titles.push(el.title);
    })
    if (titles.includes(username)) {
        hideUserCards(username)
    } else {
        document.getElementById("inputSearchUserCards").value = 'Пользователь не существует';
        document.getElementById("inputSearchUserCards").style.color = 'red';
    }
}

function hideUserCards(username) {
    const cards = Array.prototype.slice.call(document.getElementsByClassName('username-card'));

    for (const card of cards) {
        if (card.title === username) {
            card.style.display = 'block';
        } else {
            card.style.display = 'none';
        }
    }
}

HTML инпута:

<div class="col-lg-8 col-md-7 col-sm-12 col-12">
    <input type="search" class="form-control" id="inputSearchUserCards" placeholder="Введите username пользователя" list="UserName">
 </div>
 <div class="col-lg-3 col-md-4 col-sm-9 col-9">
    <button class="btn btn-success" onclick="showSearchedUserCard()"> 
           <strong>Отфильтровать</strong>
     </button>
 </div>

HTML целевого дива:

<div class="card-body px-0 py-0">
    {% for object in object_list %}
     <div class="username-card" title="{{ object.username }}">
        ....

Буду благодарен любому ответу

javascript
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Можно воспользоваться селектором querySelectorAll для выбора нужных тегов и потом пройтись по каждому элементу методом forEach и в массив добавить нужные нам значения

  function showSearchedUserCard() {
    const username = document.getElementById("inputSearchUserCards").value
    const divList = document.querySelectorAll('.username-card');
    const titles = []
    divList.forEach(el => {
      titles.push(el.title);
    })
    console.log('Полученный массив', titles)
    if (titles.includes(username)) {
      console.log(`${username} найден`)
    } else {
      console.log(`${username} не найден`)
    }
  }
<input value="" id="inputSearchUserCards" placeholder="Введите имя">
<div class="username-card" title="Петя"></div>
<div class="username-card" title="Вася"></div>
<div class="username-card" title="Маша"></div>
<div class="username-card" title="Катя"></div>
<button>Проверить</button>