Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

JavaScript
1

Tell us what’s happening:

I thought by using the classList.toggle method i would pass the test.
Any assistance will be appreciated.

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

/* file: script.js */
const favoriteIcon = document.getElementById("favorite-icon");
//favoriteIcon.classList.toggle(".filled")
itemList.addEventListener("click",()=> {
  favoriteIcon.classList.toggle("filled")
})


/* file: styles.css */
.filled{
  background-color: lightgrey;
  border: dotted 2px #000;
  color:red;
  
}
.favorite-icon{
  width: 100px;
  height: 30px;
  color: #fff;
  background-color: #000;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Safari/605.1.15

Challenge Information:

Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

2

Hi @dreyes61

There is a message in the console.

Uncaught ReferenceError: itemList is not defined

Happy coding

3

Hi @dreyes61 !

You have a few issues here

As mentioned the first issue is here

where is itemList defined?

You should be getting this error message in the console

Uncaught ReferenceError: itemList is not defined

Once you fix that, then you are trying to click on the entire list which is not the desired behavior. You want to be able to click on that button and have that button be filled or not.

But when you do click on the list, you should be getting this error message in the console

Uncaught TypeError: Cannot read properties of null (reading ‘classList’)

That points to this issue here

But if I look in your HTML code, I don’t see an id by that name.

You can.
I just refactored your code and was able to pass

Your issue is your logic.

As mentioned earlier, you are trying to apply a click event to the entire list. But that is not the correct behavior.

Here is the correct behavior

  • User clicks on a button, and the button becomes filled. User clicks on the same button and now it is empty again.
  • User clicks on a different button and the button becomes filled. Click it again, it is now unfilled

I would suggest starting with the google search of “how to query for all buttons in a list javascript”

You learned about a method in the earlier lectures that will help with this.

Once you start there, then you will be on the right track for the correct behavior

Hope that helps

5

Did it work?

Do you have any other questions?

7

When I copy and paste your code, I immediately see this error message

Screenshot 2025-04-28 at 10.10.54 PM
Screenshot 2025-04-28 at 10.10.54 PM784×248 9.68 KB

allButtons is a NodeList

That video I linked shows how to work with the querySelectorAll() method and how to loop through it. It shows a for loop but you can also use other types of loops too.

You can also google “How to attach an event listeners to multiple buttons javascript” and you will get tons of results that will help point you in the right direction.

Once you refactor that, then you need to address this issue here

This is not the correct way to refer to a class. Watch that video again to fix your mistake.

Once you refactor that, then you need to address this issue here

classList is going to return a list of classes for that element.

What you really want to ask “does that button have the class filled”

I would suggest googling “how to check if element has class javascript”

there will be tons of results walking you through that

Also, I don’t see where favIcon is declared.

Lastly, you need to address this user story here

When a button element containing a heart is clicked, the heart symbol should toggle between &#9825; (empty heart) and &#10084; (filled heart), depending on its current state.

When I update all of those things, then it passes for me

9

can you show all the code? it is difficult to know the context with only a snippet

11

double check your quotes here

13

you have a curly quote, curly quotes are not valid quotation marks for html

15

the first quote here is a curly quote, you can’t use that, the second quote is a normal straight quote and that’s what you should use

16

They don’t look different to me. How can i get only straight quotes?

17

usually you use straight quotes
this time it seems a stray curly quote happened, make sure you do not have it in your code
“” these are curly quotes you should not use them
"" this are straigth quotes, you should use them

24

Please review @jwilkins.oboe’s post in this thread from two days ago where she links a video on how to use querySelectorAll() and mentions googling how to attach an event listener to multiple buttons.

25

Problem is that I’m not getting any errors in the console. I asked for help and was told to remove the curly quotes from my code so I did. But I still don’t get any errors on the console.

26

As the name implies, querySelector and querySelectorAll take a CSS selector as the argument. The selector "favorite-icon" is a type selector and would be for a custom HTML element <favorite-icon>. You want a class selector, which is written the same way as you do it in CSS ".className".

The issue with relying on an error with querySelectorAll is that unlike querySelector which returns null if it doesn’t find the element, querySelectorAll will just return an empty NodeList (which is like an empty array). You can’t rely on errors thrown from looping using forEach.

[].forEach((el) => console.count("Loop"));
console.countReset("Loop");

[10,20,30].forEach((el) => console.count("Loop"));
console.countReset("Loop");
// Loop: 1
// Loop: 2
// Loop: 3

As a rule of thumb, you can not just rely on errors thrown. Plenty of errors are silent or just logical errors.

Programming requires a lot of precision and patience. You need to write and read the code carefully, logging out as many values as needed. If you had logged out itemList you would have seen it was empty.

27

I, not gettin gany results when trying to log item list.

28

that’s because you do not have an item list, you should read the messages you received

29

I finally took the time to view the query SelectoirAll video suggested by jwilkins.oboe. Thank you. I finally understand what the method does. But i still get nothing in the console. Sorry if i seem impatient.i also made sure tha there no curly quotes. I appreciate everyone 's help. See my code below,

<!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>

.filled{
  background-color: ltghtgray;
  color: pink;
  border: px solid crimson;}
  .favorite-icon{
    width:100px;
    height: 30px
  }


const favIcon = document.querySelectorAll("ul.item-list li");
for(let i= 0;i < favIcon;i++){
  if(favIcon[i].includes("filled")){
    favIcon[i].classList.remove("filled");
    favIcon[i].innerHTML = "&#9825;";
  }  else{
    favIcon[i].classList.add("filled");
    favIcon[i].innerHtml = "&#10084;";
  }
  }
30

What is stored in favIcon ?

Did you try logging it to the console to see?

31

what are you comparing here?

32

I never saw an error message. As a matter of fact no matter what error i make i don’t get an error, syntax, reference or otherwise.
Can anybody address this issue?

Here’s my most recent code:

<!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>

.filled{
  background-color: ltghtgray;
  color: pink;
  border: px solid crimson;}
  .favorite-icon{
    width:100px;
    height: 30px
  }

const favIcon = document.querySelectorAll("ul.item-list li");
for(let i= 0;i < favIcon;i++){
  if(favIcon[i].contains("filled")){
    favIcon[i].classList.remove("filled");
    favIcon[i].innerHTML = "&#9825;";
  }  else{
    favIcon[i].classList.add("filled");
    favIcon[i].innerHtml = "&#10084;";
  }
  }