Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

JavaScript
1

Tell us what’s happening:

My code may look a bit messy but it still works how it should. When I click on the heart it changes its color (class changes) and it becomes filled (innerHTML changes). Still the 8th and 9th test are not passing. Help me please what I may be missing

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

/* file: styles.css */
.filled {
  color: red;
}

/* file: script.js */
const favoriteMilk = document.querySelector("#Milk button")

const favoriteMeet = document.querySelector("#Meet button")

const favoriteCheese = document.querySelector("#Cheese button")

function click(object) {
  if (object == "Milk") {
    if (favoriteMilk.innerHTML == '♡') { 
  favoriteMilk.innerHTML= '&#10084;';
  favoriteMilk.classList.add('filled')
  } else if(favoriteMilk.innerHTML == '❤'){
    favoriteMilk.innerHTML = '&#9825;';
    favoriteMilk.classList.remove('filled')
  }} else 
  if (object == 'Meet') {
    if (favoriteMeet.innerHTML == '♡') { 
  favoriteMeet.innerHTML= '&#10084;';
  favoriteMeet.classList.add('filled')
  } else if(favoriteMeet.innerHTML == '❤'){
    favoriteMeet.innerHTML = '&#9825;';
    favoriteMeet.classList.remove('filled')
  }} else 
  if (object == 'Cheese') {
    if (favoriteCheese.innerHTML == '♡') { 
  favoriteCheese.innerHTML= '&#10084;';
  favoriteCheese.classList.add('filled')
  } else if(favoriteCheese.innerHTML == '❤'){
    favoriteCheese.innerHTML = '&#9825;';
    favoriteCheese.classList.remove('filled')
  }}
}

favoriteMilk.addEventListener('click', () => click('Milk'))

favoriteMeet.addEventListener('click', () => click('Meet'))

favoriteCheese.addEventListener('click', () => click('Cheese'))

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Challenge Information:

Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

2

check if the hearts and the html codes are the same thing, compared with the equality operator

3

Thank you very much. It actually returns false. I also checked out other topics again and .innerHTML returning empty object is intended. So I chose the other way to check the state of the button, I tried checking the class and it worked. Btw can you please lead me to the right way of writing this task so it wouldn’t be this messy. I understand that even though it’s working - it is not the way you would wanna see it