Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

JavaScript
1

Tell us what’s happening:

I am trying to do a querySelectAll to grab all button elements. When I use console.log on the querySelectorAll I see it’s grabbing the right number of elements but there’s nothing in the objects. This doesn’t seem right, but I’m not sure where things are going wrong. My plan was then to do a .forEach and assign my handleClick function to update the values.

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>Candy <button class="favorite-icon">&#9825;</button></li>
  <li>Hottie <button class="favorite-icon">&#9825;</button></li>
  <li>Milk Shake <button class="favorite-icon">&#9825;</button></li>
  </ul>
  </body>

  <script src="script.js"></script>
</html>

/* file: styles.css */
.favorite-icon{
 background-color: #00000000;
 border: none;
 font-size: 1rem;
}

.filled{
  font-size: 1.5rem;
}

/* file: script.js */


//First we need to get the elements

const faveIcon = document.querySelectorAll(".favorite-icon");

console.log(faveIcon);



//then we need to have a function that toggles the filled and updated the text of the button
const handleClick = (button) =>{
if(button.innerHTML === "&#9825;"){
  button.innerHTML = "&#10084;";
  button.classList.add("filled");
}
else{
  button.innerHTML = "&#9825;";
  button.classList.remove("filled");
}

};

faveIcon.forEach((button) => 
  button.addEventListener("click", () =>handleClick(button))
);

Your browser information:

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

Challenge Information:

Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

2

ok I figured this out on my own. the empty looking arrays are how they come through in the console.log.

My main issue was I was going off of what the inner HTML was equal to instead of checking if the element had the filled class already.

3

it’s a good time to start using the browser console, you can open it with F12 usually