Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

JavaScript
1

Tell us what’s happening:

I’m only failing test 8, which is:

  1. When the button element is clicked, and it contains the class filled, you should remove the class filled from the button element and change the innerHTML of the button element to :heart:.

I can see when I click the button, my background color is removed but the heart is still filled. I thought it was because I used else, so I removed that and add another if statement, but that just made my first if statement not work. I’m kinda at a loss here :frowning:

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><button class="favorite-icon">&#9825;</button></li>
      <li><button class="favorite-icon">&#9825;</button></li>
      <li><button class="favorite-icon">&#9825;</button></li>
    </ul>
    <script src="script.js"></script>
  </body>
</html>

/* file: styles.css */
.filled {
  background-color: blue;
}

/* file: script.js */
const heartBtn = document.querySelectorAll(".favorite-icon");

function handleBtnClick(btn) {
  btn.classList.toggle("filled");
  if (btn.innerHTML = "&#9825;") {
    btn.innerHTML = "&#10084;";
  } else {
    btn.innerHTML = "&#9825;";
  }
}

heartBtn.forEach(button => button.addEventListener("click", () => {
    handleBtnClick(button)
  }));

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36

Challenge Information:

Build a Favorite Icon Toggler - Build a Favorite Icon Toggler
https://www.freecodecamp.org/learn/full-stack-developer/lab-favorite-icon-toggler/build-a-favorite-icon-toggler

2

I think it was the condition of my if statement, as I changed it to something else and now I’ve passed. Still curious why this didn’t work though if anyone has insight.

3

what is this line doing?
why is it doing the same thing as this other one?

4

Thank you for taking a look!

I believe the first line is checking if the innerHTML is “&9825;”.

My thoughts were that if the button had been clicked once, the innerHTML would no longer be “:heart:” and the condition would be false, so it would use my else statement which is your second one, btn.innerHTML = “:heart:”;

Shouldn’t the innerHTML = “:heart:” if the button has been clicked once with my code?

5

so the syntax to check a value and assign a value is the same? are you sure?

6

No I am not lol okay I looked up what the syntax for checking a value is.. thank you for the help!