Build a favorite icon toggler

JavaScript
1

Hello. Can someone tell me why
const btns = document.querySelectorAll(‘.favorite-icon’)
isnt grabbing the buttons? When i console log, it gives three empty objects. Thanks very kindly for your generous help.


  const btns = document.querySelectorAll('.favorite-icon');
  console.log(btns);

btns.forEach(button => {
button.addEventListener('click', (event)=> {
 let clickedBtn = event.target
 console.log(clickedBtn)
 if(clickedBtn.innerHTML == `♡`){
   clickedBtn.innerHTML = `❤`
 } else {
   clickedBtn.innerHTML = `♡`
 }
})
})



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

fcc console doesn’t always show these objects fully.

What if you just log the first element of the btns array (or nodelist) btns[0] ?

3

thanks for your reply. I get an {} empty object when i do btns[0]

4

Can you share your full code and a link to the challenge?

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Help button located on the challenge. This button only appears if you have tried to submit an answer at least three times.

image
image622×306 7.96 KB

The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

5

It’s there, the fcc console just isn’t displaying it.

Press F12 and check the browser console.

// [object NodeList] (3)
[<button/>,<button/>,<button/>]

<button class="favorite-icon">♡</button>
1 Like
6

thanks for that. It worked

1 Like
7

I feel like this should work. Im trying to click the hearts to make them go to filled and unfilled yet nothing happens.


const btns = document.querySelectorAll('.favorite-icon');
console.log(btns);  

btns.forEach(button => {
button.addEventListener('click', (event)=> {
 let clickedBtn = event.target
 console.log(clickedBtn)
 
 if(clickedBtn.innerHTML === `&#9825;`){
   clickedBtn.innerHTML = `&#10084;`
 }else {
   clickedBtn.innerHTML = `&#9825;`
 } 
})
})
8

never mind. I fixed the condition, changed it to a boolean

1 Like
9

I was going to say to log the clickedBtn.innerHTML to the console and see it.

Glad you got it :+1:

1 Like
10

thanks for your help. The boolean didn’t end up working but i found a better condition that worked

1 Like