У меня есть несколько приложений, поэтому я пытаюсь написать код на html. Я хочу отфильтровать карточки по материализованному CSS, но я не понял, где не работает код, который я написал. Можете ли вы помочь мне исправить это?
Извините, если статья не понята. гугл переводчик:)
да не язым язд иште язачагыми кабул эдер мисин артык
function myFunction() {
var input, filter, cards, cardContainer, h5, title, i;
input = document.getElementById("myFilter");
filter = input.value.toUpperCase();
cardContainer = document.getElementById("myItems");
cards = cardContainer.getElementsByClassName("card");
for (i = 0; i < card.length; i++) {
title = cards[i].querySelector(".card-content h5.card-title");
if (title.innerText.toUpperCase().indexOf(filter) > -1) {
cards[i].style.display = "";
} else {
cards[i].style.display = "none";
}
}
}
<div class="container">
<div class="row">
<div class="col-sm-12 mb-3">
<input type="text" id="myFilter" class="form-control" onkeyup="myFunction()" placeholder="Search for names..">
</div>
</div>
<div class="row" id="myItems">
<div class="row">
<div class="col s6">
<div class="card">
<div class="card-image waves-block waves-light">
<img class="activator" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/izncB6dCLV7LBQ5MsOPyMx9mUDa.jpg">
</div>
<div class="card-content">
<center>
<h5 class="card-title">How i Met Your Mother</h5>
</center>
</div>
</div>
</div>
<div class="col s6">
<div class="card">
<div class="card-image waves-block waves-light">
<img class="activator" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/A9QDK4OWpv41W27kCv0LXe30k9S.jpg">
</div>
<div class="card-content">
<center>
<h5 class="card-title">Two and a Half Men</h5>
</center>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s6">
<div class="card">
<div class="card-image waves-block waves-light">
<img class="activator" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/w7VV1jdtwzEC0c71AjUUA4T65Az.jpg">
</div>
<div class="card-content">
<center>
<h5 class="card-title">Seinfeld</h5>
</center>
</div>
</div>
</div>
<div class="col s6">
<div class="card">
<div class="card-image waves-block waves-light">
<img class="activator" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/x40NhjIPoDoTbT0z2utFgIedtwh.jpg">
</div>
<div class="card-content">
<center>
<h5 class="card-title">Scrubs</h5>
</center>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s6">
<div class="card">
<div class="card-image waves-block waves-light">
<img class="activator" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/ooBGRQBdbGzBxAVfExiO8r7kloA.jpg">
</div>
<div class="card-content">
<h5 class="card-title">Big Bang</h5>
</div>
</div>
</div>
<div class="col s6">
</div>
</div>
</di>
<style>
body {
background-color: #222731;
}
</style>