Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

JavaScript
1

Tell us what’s happening:

My code visually seems to work just fine. The heart on each button changes from empty to filled, the color turns red meaning the correct class is being added and removed. But for some reason, tests 8 and 9 still will not pass and I cannot find why.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Favorite Icon Toggler</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <ul class="item-list">
      <li>Apple<button class="favorite-icon">&#9825;</button></li>
      <li>Bananas<button class="favorite-icon">&#9825;</button></li>
      <li>Oranges<button class="favorite-icon">&#9825;</button></li>
    </ul>
    <script src="script.js"></script>
  </body>
</html>

/* file: styles.css */
body {
  display: block;
  margin: auto;
  width: 400px;
  text-align: center;
  list-style-position: inside;
  height: 400px;
  font-family: Arial;
}
button {
  width: 2em;
  height: 2em;
  margin-left: 5px;
}

li {
  margin-top: 5px;
  font-size: 1.1em;
}

.filled {
  color: red;
}

/* file: script.js */
const itemList = document.querySelectorAll(".item-list li button");
let eventHandlers = [];
for (let element of itemList) {
  element.addEventListener("click", () => {
    element.classList.toggle("filled")
    if (element.textContent == "♡") {
      element.innerHTML = "&#10084;";
    } else {
      element.innerHTML = "&#9825;"
    }
  });
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:141.0) Gecko/20100101 Firefox/141.0

Challenge Information:

Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

2

Welcome to the forum @drywhall

Check what the if condition is doing.

Happy coding