J'ai créé un article de blog avec trois catégories : (Catégorie Marketing numérique, Catégorie Trucs et conseils, Catégorie Crypto-monnaie)

Ce que je veux faire, c'est le filtrer.

Par exemple, si je souhaite voir tous les articles de la catégorie Marketing numérique, je cliquerai sur ce bouton pour afficher toutes les catégories de marketing numérique et masquer les autres catégories.

Voici mon exemple de code. Le problème est que mon filtre ne fonctionne pas. où est le problème?

J'ai essayé d'ajouter du JavaScript pour que cela fonctionne mais cela ne fonctionne toujours pas. où est le problème?

document.addEventListener("DOMContentLoaded", () => {
  "use strict";

  /**
   * Article Category Filter
   */
  const filterButtons = document.querySelectorAll('.blog-filters button');
  const articleCards = document.querySelectorAll('.article-card');

  filterButtons.forEach(button => {
    button.addEventListener('click', () => {
      const selectedCategory = button.getAttribute('data-category');

      articleCards.forEach(card => {
        const cardCategory = card.getAttribute('data-category');

        if (selectedCategory === 'all' || selectedCategory === cardCategory) {
          card.style.display = 'block';
        } else {
          card.style.display = 'none';
        }
      });
    });
  });
}); // this line added by community

<section id="blog" class="blog">
  <div class="row">
    <div class="col-md-8">
      <div class="posts-list">
        <div class="row">
          <div class="col-lg-6 col-md-6 d-md-flex article-card" data-category="digital-marketing-category">
            Blog Card
          </div>
          <!-- Article Card -->

          <div class="col-lg-6 col-md-6 d-md-flex article-card" data-category="tips-and-advice-category">
            Blog Card
          </div>
          <!-- Article Card -->

          <div class="col-lg-6 col-md-6 d-md-flex article-card" data-category="cryptocurrency-category">
            Blog Card
          </div>
          <!-- Article Card -->
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="sidebar">
        <h3 class="sidebar-title">Article Categories</h3>
        <div class="blog-filters">
          <button data-category="filter-all">All</button>
          <button data-category="digital-marketing-category">Digital Marketing</button>
          <button data-category="tips-and-advice-category">Tips & Advice</button>
          <button data-category="cryptocurrency-category">Cryptocurrency</button>
        </div>
      </div>
    </div>
  </div>
</section>