Почему мои кнопки фильтрации данных не работают? ⇐ Javascript

[Anonymous]

По какой -то причине не все кнопки будут фильтровать. Все по-прежнему работает, Markdown и русалка показывают некоторые, но не все карты, которые они должны.const filterButtons = document.querySelectorAll(".filter-buttons button");
filterButtons.forEach(button => {
button.addEventListener("click", function() {
filterCards(this.getAttribute("data-tag"), this);
});
});
});

function filterCards(tag, button) {
console.log("filterCards called with tag:", tag);
let cards = document.querySelectorAll(".card");
let buttons = document.querySelectorAll(".filter-buttons button");

// Remove "active" class from all buttons
buttons.forEach(btn => btn.classList.remove("active"));

// Add "active" class to the clicked button
button.classList.add("active");

// Filter cards
cards.forEach(card => {
let cardTags = card.getAttribute("data-tags").split(" ");
if (tag === "all" || cardTags.includes(tag)) {
card.classList.remove("hidden");
} else {
card.classList.add("hidden");
}
});
}< /code>
.filter-buttons {
margin-bottom: 20px;
text-align: center;
width: 100%;
}

.filter-buttons button {
margin: 5px;
padding: 10px;
cursor: pointer;
border: none;
background-color: var(--background-color);
border-radius: 5px;
outline-color: var(--primary-color);
}

.filter-buttons button.active {
background-color: var(--primary-color);
color: white;
}

.cards {
display: flex;
flex-wrap: wrap;
/* Allows wrapping if necessary */
gap: 20px;
/* Adds space between cards */
justify-content: center;
/* Centers cards in the container */

}

.card {
width: 200px;
padding: 15px;
border: 1px solid var(--accent-color);
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
display: block;
cursor: pointer;
}

.card-link {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
}

.card-link:hover {
background-color: #3e8e41;
}

.hidden {
display: none;
}< /code>
All

Design
UI/UX
Database
Scripting
HTML5
CSS3
JavaScript



DragonFighter RPG
A text-based monster fighting role-playing game.



Portfolio
This portfolio website.



Student Calendar
A student calendar app.



LinkTree Clone
A linktree clone with a Download button for contact info.



UBER-Data
A data analysis clone of UBER



Tic Tac Toe
A game of Tic Tac Toe


< /code>
< /div>
< /div>
< /p>
Консоль показывает, что все должны быть рабочими картами, вызванными с тегом: css3 < /p>
База данных html5 css3 показывают карты, несмотря на то, что есть карты с соответствующими данными. Я ожидал, что кнопки отфильтровали только карты, не содержащие соответствующих данных. /> Вот, когда я нажимаю Design (кнопка, которая работает):
< /p>
Вот когда я нажимаю Database, одна из кнопок, которые не работают:


Подробнее здесь: https://stackoverflow.com/questions/795 ... ttons-work