For some reason not all the buttons will filter. All still works, markdown and mermaid show some but not all of the cards they should.

Code:

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");
    }
  });
}

.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;
}

<button data-tag="all">All</button> <!-- All projects button DO NOT DELETE -->

<button data-tag="design">Design</button> <!-- Design projects button -->
<button data-tag="UI/UX">UI/UX</button> <!-- UI/UX projects button -->
<button data-tag="database">Database</button> <!-- Database projects button -->
<button data-tag="scripting">Scripting</button> <!-- Scripting projects button -->
<button data-tag="HTML5">HTML5</button> <!-- HTML5 projects button -->
<button data-tag="CSS3">CSS3</button> <!-- CSS3 projects button -->
<button data-tag="JavaScript">JavaScript</button> <!-- JavaScript projects button -->

<div class="cards">
  <div class="card" data-tags=" design , css3 , html5 , Javascript , scripting , frontend , game , web , UI/UX , markdown , mobile ">
    <a href=".github.io/">
      <h3>DragonFighter RPG</h3>
      <p>A text-based monster fighting role-playing game.</p>
    </a>
  </div>
  <div class="card" data-tags=" design , css3 , html5 , javascript , scripting , frontend , web , UI/UX , markdown , mobile ">
    <a href="/">
      <h3>Portfolio</h3>
      <p>This portfolio website.</p>
    </a>
  </div>
  <div class="card" data-tags=" UI/UX , design , css3 , html5 , javascript , frontend , web , react ">
    <a href="/">
      <h3>Student Calendar</h3>
      <p>A student calendar app.</p>
    </a>
  </div>
  <div class="card" data-tags=" UI/UX , design , css3 , html5 , javascript , frontend , web , mobile ">
    <a href="/">
      <h3>LinkTree Clone</h3>
      <p>A linktree clone with a Download button for contact info.</p>
    </a>
  </div>
  <div class="card" data-tags=" Database , SQL , mermaid ">
    <a href="">
      <h3>UBER-Data</h3> 
      <p> A data analysis clone of UBER</p>
    </a>
  </div>
  <div class="card" data-tags=" UI/UX , design , css3 , html5 , javascript , frontend , web , mobile ">
    <a href="/">
      <h3>Tic Tac Toe</h3>
      <p>A game of Tic Tac Toe</p>
    </a>
  </div>
</div>

For some reason not all the buttons will filter. All still works, markdown and mermaid show some but not all of the cards they should.

Code:

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");
    }
  });
}

.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;
}

<button data-tag="all">All</button> <!-- All projects button DO NOT DELETE -->

<button data-tag="design">Design</button> <!-- Design projects button -->
<button data-tag="UI/UX">UI/UX</button> <!-- UI/UX projects button -->
<button data-tag="database">Database</button> <!-- Database projects button -->
<button data-tag="scripting">Scripting</button> <!-- Scripting projects button -->
<button data-tag="HTML5">HTML5</button> <!-- HTML5 projects button -->
<button data-tag="CSS3">CSS3</button> <!-- CSS3 projects button -->
<button data-tag="JavaScript">JavaScript</button> <!-- JavaScript projects button -->

<div class="cards">
  <div class="card" data-tags=" design , css3 , html5 , Javascript , scripting , frontend , game , web , UI/UX , markdown , mobile ">
    <a href="https://alexmcvay.github.io/DragonFighter.github.io/">
      <h3>DragonFighter RPG</h3>
      <p>A text-based monster fighting role-playing game.</p>
    </a>
  </div>
  <div class="card" data-tags=" design , css3 , html5 , javascript , scripting , frontend , web , UI/UX , markdown , mobile ">
    <a href="https://alexmcvay.github.io/Portfolio/">
      <h3>Portfolio</h3>
      <p>This portfolio website.</p>
    </a>
  </div>
  <div class="card" data-tags=" UI/UX , design , css3 , html5 , javascript , frontend , web , react ">
    <a href="https://studentcalendarlify.app/">
      <h3>Student Calendar</h3>
      <p>A student calendar app.</p>
    </a>
  </div>
  <div class="card" data-tags=" UI/UX , design , css3 , html5 , javascript , frontend , web , mobile ">
    <a href="https://alexmcvay.github.io/Contact-Card/">
      <h3>LinkTree Clone</h3>
      <p>A linktree clone with a Download button for contact info.</p>
    </a>
  </div>
  <div class="card" data-tags=" Database , SQL , mermaid ">
    <a href="https://github/AlexMcVay/UBER-Data">
      <h3>UBER-Data</h3> 
      <p> A data analysis clone of UBER</p>
    </a>
  </div>
  <div class="card" data-tags=" UI/UX , design , css3 , html5 , javascript , frontend , web , mobile ">
    <a href="https://alexandra-mcvaylify.app/">
      <h3>Tic Tac Toe</h3>
      <p>A game of Tic Tac Toe</p>
    </a>
  </div>
</div>

The console is showing that everything should be working filterCards called with tag: CSS3

The Database HTML5 CSS3 show no cards even though there are cards with the appropriate data-tags. I expected the buttons to filter out only the cards not containing the appropriate data-tags.

Screenshots:

Here it is when I click all:

Here it is when I click design ( a button that works):

Here is is when I click Database, one of the buttons that do not work:

• javascript
• html
• css
• filter

Share Improve this question Follow edited Mar 12 at 11:42 ADyson 62.2k1616 gold badges7979 silver badges9292 bronze badges asked Mar 12 at 11:38 Alex McVayAlex McVay 344 bronze badges 3

• 3 Currently none of it works because the JavaScript code you've provided contains a syntax error – ADyson Commented Mar 12 at 11:42
• 2 Even if we remove the direct cause of the syntax error it still doesn't recreate the behaviour shown in your screenshots: jsfiddle/3vnj5Lfq/2 . So the code you've provided still isn't a minimal reproducible example of the problem you're complaining about. Please check it carefully and then update. – ADyson Commented Mar 12 at 11:46
• 1 const filterButtons = document.querySelectorAll(".filter-buttons button"); won't select anything in the HTML you've provided here, for a start – ADyson Commented Mar 12 at 11:50

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 0

If you use checkboxes instead of buttons you can use CSS to style the cards according to the checked boxes. And then use JavaScript to check if all or none should be checked.

document.forms.menu.addEventListener('click', e => {
  let form = e.target.form;
  switch (e.target.name) {
    case 'all':
      [...form.others.elements].forEach(input => input.checked = e.target.checked);
      break;
    default:
      let otherschecked = ([...form.others.elements].filter(input => !input.checked).length == 0) ?? true;
      form.all.checked = otherschecked;
      break;
  }
});

body .card {
  display: none;
}

body:has(input[name="design"]:checked) .card[data-tags~="design"] {
  display: flex;
}

body:has(input[name="UI/UX"]:checked) .card[data-tags~="UI/UX"] {
  display: flex;
}

body:has(input[name="database"]:checked) .card[data-tags~="database"] {
  display: flex;
}

label {
  display: inline-block;
  padding: 1em;
  border: solid thin orange;
}

label:has(input:checked) {
  background-color: orange;
}

label input {
  display: none;
}

fieldset {
  display: inline-block;
  border: none;
  margin: 0;
  padding: 0;
}

.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;
}

<form name="menu">
  <label><input type="checkbox" name="all">All</label>
  <fieldset name="others">
    <label><input type="checkbox" name="design">Design</label>
    <label><input type="checkbox" name="UI/UX">UI/UX</label>
    <label><input type="checkbox" name="database">Database</label>
  </fieldset>
</form>
<div class="cards">
  <div class="card" data-tags=" design , css3 , html5 , Javascript , scripting , frontend , game , web , UI/UX , markdown , mobile ">
    <a href="https://alexmcvay.github.io/DragonFighter.github.io/">
      <h3>DragonFighter RPG</h3>
      <p>A text-based monster fighting role-playing game.</p>
    </a>
  </div>
  <div class="card" data-tags=" design , css3 , html5 , javascript , scripting , frontend , web , UI/UX , markdown , mobile ">
    <a href="https://alexmcvay.github.io/Portfolio/">
      <h3>Portfolio</h3>
      <p>This portfolio website.</p>
    </a>
  </div>
  <div class="card" data-tags=" UI/UX , design , css3 , html5 , javascript , frontend , web , react ">
    <a href="https://studentcalendarlify.app/">
      <h3>Student Calendar</h3>
      <p>A student calendar app.</p>
    </a>
  </div>
  <div class="card" data-tags=" UI/UX , design , css3 , html5 , javascript , frontend , web , mobile ">
    <a href="https://alexmcvay.github.io/Contact-Card/">
      <h3>LinkTree Clone</h3>
      <p>A linktree clone with a Download button for contact info.</p>
    </a>
  </div>
  <div class="card" data-tags=" Database , SQL , mermaid ">
    <a href="https://github/AlexMcVay/UBER-Data">
      <h3>UBER-Data</h3> 
      <p> A data analysis clone of UBER</p>
    </a>
  </div>
  <div class="card" data-tags=" UI/UX , design , css3 , html5 , javascript , frontend , web , mobile ">
    <a href="https://alexandra-mcvaylify.app/">
      <h3>Tic Tac Toe</h3>
      <p>A game of Tic Tac Toe</p>
    </a>
  </div>
</div>

There are a few errors in your code:

1. You need to make sure your buttons are inside a container with the filter-buttons class
2. You split on a space but you delimiter is a comma surrounded by spaces - ,
3. You have extra spaces at the beginning and end of your card data tags attributes
4. Your tags are not case sensitive so don't match the button filter text
5. You have an extra }) after your filterButtons.forEach

const filterButtons = document.querySelectorAll(".filter-buttons button");
const cards = document.querySelectorAll(".card");

filterButtons.forEach(button => {
  button.addEventListener("click", e => {
    filterCards(e.currentTarget);
  });
});

function filterCards(button) {
  const tag = button.dataset.tag;
  console.log("filterCards called with tag:", tag);

  filterButtons.forEach(btn => btn.classList.toggle("active", btn === button));

  // Filter cards
  cards.forEach(card => {
    let cardTags = card.dataset.tags.split(" ");
      
    card.classList.toggle("hidden", tag !== "all" && !cardTags.includes(tag));
  });
}

.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;
}

<div class="filter-buttons">
  <button data-tag="all">All</button> <!-- All projects button DO NOT DELETE -->
  <button data-tag="design">Design</button> <!-- Design projects button -->
  <button data-tag="UI/UX">UI/UX</button> <!-- UI/UX projects button -->
  <button data-tag="database">Database</button> <!-- Database projects button -->
  <button data-tag="scripting">Scripting</button> <!-- Scripting projects button -->
  <button data-tag="HTML5">HTML5</button> <!-- HTML5 projects button -->
  <button data-tag="CSS3">CSS3</button> <!-- CSS3 projects button -->
  <button data-tag="JavaScript">JavaScript</button> <!-- JavaScript projects button -->
</div>

<div class="cards">
  <div class="card" data-tags="design CSS3 HTML5 JavaScript scripting frontend game web UI/UX markdown mobile">
    <a href="https://alexmcvay.github.io/DragonFighter.github.io/">
      <h3>DragonFighter RPG</h3>
      <p>A text-based monster fighting role-playing game.</p>
    </a>
  </div>
  <div class="card" data-tags="design CSS3 HTML5 JavaScript scripting frontend web UI/UX markdown mobile">
    <a href="https://alexmcvay.github.io/Portfolio/">
      <h3>Portfolio</h3>
      <p>This portfolio website.</p>
    </a>
  </div>
  <div class="card" data-tags="UI/UX design CSS3 HTML5 JavaScript frontend web react">
    <a href="https://studentcalendarlify.app/">
      <h3>Student Calendar</h3>
      <p>A student calendar app.</p>
    </a>
  </div>
  <div class="card" data-tags="UI/UX design CSS3 HTML5 JavaScript frontend web mobile">
    <a href="https://alexmcvay.github.io/Contact-Card/">
      <h3>LinkTree Clone</h3>
      <p>A linktree clone with a Download button for contact info.</p>
    </a>
  </div>
  <div class="card" data-tags="Database SQL mermaid">
    <a href="https://github/AlexMcVay/UBER-Data">
      <h3>UBER-Data</h3> 
      <p> A data analysis clone of UBER</p>
    </a>
  </div>
  <div class="card" data-tags="UI/UX design css3 html5 javascript frontend web mobile">
    <a href="https://alexandra-mcvaylify.app/">
      <h3>Tic Tac Toe</h3>
      <p>A game of Tic Tac Toe</p>
    </a>
  </div>
</div>

The problem you've got here is that the cardTags.includes(tag) comparison doesn't work for the particular values you've mentioned, because the string comparison done by includes() is case-sensitive. You have things like HTML5 in the button's tag, but html5 in the card's tag. It's that simple. I've straightened out your data so it's all lower-case, for consistency.

N.B. Another minor issue (although it didn't contribute to the problem) is that your tags were split by both spaces and commas in the data tags, yet your .split call only splits on a space. This meant that the resulting cardTags array actually contained lots of entries with a comma in them. It didn't do any harm but it's not logical, so in the example below I've just separated the tags by comma and amended the split() call accordingly.

N.B. 2: Your posted code had a syntax error and also didn't make it possible to actually select any of the buttons, so I've amended it to make that work, by adding the necessary classes to the HTML and removing the extra stray set of brackets in the JS.

Final code:

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(",");
      console.log(cardTags);
      if (tag === "all" || cardTags.includes(tag)) {
          card.classList.remove("hidden");
      } else {
          card.classList.add("hidden");
      }
  });
}

.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;
}

<div class="filter-buttons">
  <button class="button" data-tag="all">All</button>
  <!-- All projects button DO NOT DELETE -->
  <button class="button" data-tag="design">Design</button>
  <!-- Design projects button -->
  <button class="button" data-tag="ui/ux">UI/UX</button>
  <!-- UI/UX projects button -->
  <button class="button" data-tag="database">Database</button>
  <!-- Database projects button -->
  <button class="button" data-tag="scripting">Scripting</button>
  <!-- Scripting projects button -->
  <button class="button" data-tag="html5">HTML5</button>
  <!-- HTML5 projects button -->
  <button class="button" data-tag="css3">CSS3</button>
  <!-- CSS3 projects button -->
  <button class="button" data-tag="javascript">JavaScript</button>
  <!-- JavaScript projects button -->
</div>

<div class="cards">
  <div
    class="card"
    data-tags="design,css3,html5,Javascript,scripting,frontend,game,web,ui/ux,markdown,mobile"
  >
    <a href="https://alexmcvay.github.io/DragonFighter.github.io/">
      <h3>DragonFighter RPG</h3>
      <p>A text-based monster fighting role-playing game.</p>
    </a>
  </div>
  <div
    class="card"
    data-tags="design,css3,html5,javascript,scripting,frontend,web,ui/ux,markdown,mobile "
  >
    <a href="https://alexmcvay.github.io/Portfolio/">
      <h3>Portfolio</h3>
      <p>This portfolio website.</p>
    </a>
  </div>
  <div
    class="card"
    data-tags="ui/ux,design,css3,html5,javascript,frontend,web,react"
  >
    <a href="https://studentcalendarlify.app/">
      <h3>Student Calendar</h3>
      <p>A student calendar app.</p>
    </a>
  </div>
  <div
    class="card"
    data-tags="ui/ux,design,css3,html5,javascript,frontend,web,mobile"
  >
    <a href="https://alexmcvay.github.io/Contact-Card/">
      <h3>LinkTree Clone</h3>
      <p>A linktree clone with a Download button for contact info.</p>
    </a>
  </div>
  <div class="card" data-tags="database,sql,mermaid ">
    <a href="https://github/AlexMcVay/UBER-Data">
      <h3>UBER-Data</h3>
      <p>A data analysis clone of UBER</p>
    </a>
  </div>
  <div
    class="card"
    data-tags="ui/ux,design,css3,html5,javascript,frontend,web,mobile "
  >
    <a href="https://alexandra-mcvaylify.app/">
      <h3>Tic Tac Toe</h3>
      <p>A game of Tic Tac Toe</p>
    </a>
  </div>
</div>