Я хочу найти список карточек, содержащих продукты, используя Javascript. Цель состоит в том, чтобы показать только те результаты, которые содержат название продукта. Я не уверен, правильный ли мой подход или нет, но я следил за онлайн-учебниками, и все они, похоже, показывают только поиск по списку с использованием тегов «ul». Это требование?
function myFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("card-content");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("p")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<div class="columns is-multiline" id="myUL">
<div class="column is-one-fifth">
<div class="card has-text-centered">
<div class="card-content">
<p>$100</p>
<p class="hippo">Playstation 5</p>
</div>
<footer class="card-footer">
<p class="card-footer-item">
<a href="" class="has-text-grey">View</a>
</p>
<p class="card-footer-item">
<a href="" class="has-text-grey">Add to Cart</a>
</p>
</footer>
</div>
</div>
<div class="column is-one-fifth">
<div class="card has-text-centered">
<div class="card-content">
<p>$250</p>
<p class="hippo">Xbox</p>
</div>
<footer class="card-footer">
<p class="card-footer-item">
<a href="" class="has-text-grey">View</a>
</p>
<p class="card-footer-item">
<a href="" class="has-text-grey">Add to Cart</a>
</p>
</footer>
</div>
</div>
Я не понимаю, почему приведенный выше код не работает. Что я делаю не так?
Я думаю, что это должно быть ul.getElementsByClassName вместо ul.getElementsByTagName.
li = ul.querySelectorAll(".card-content");
вернуть 0lenght
использовать вместоquerySelectorAll / getElementsByTagName