Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

JavaScript
1

Tell us what’s happening:

Hello Guys, My code ain’t working, I made a AddEventListener that checks for a click for every button and toggles the filled class, and the CSS should handle changing the content of the buttons, but I clearly did something wrong. Can Anyone help?

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>First One <button class='favorite-icon'></button></li>
    <li>Second One <button class='favorite-icon'></button></li>
    <li>Third One <button class='favorite-icon'></button></li>
  </ul>
  <script src='script.js'></script>
  </body>
</html>

/* file: styles.css */
ul {
  width: 140px;
  border: 1px solid black;
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
  list-style-position: outside;
  padding: 10px 5px;
}
.filled {
  content: '&#10084;';
}
button:not(class='filled') {
  content: '&#9825';
}

/* file: script.js */
const btns = document.getElementsByClassName('favorite-icon');



for (let btn of btns) {
  btn.addEventListener('click', () => btn.classList.toggle('filled'))
}

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 Edg/140.0.0.0

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 don’t think you can use content like that, it does not change the text inside the button

also the code inside your :not does not look like a correct selector

3

I noticed the :not part after i published this on the forum. But what about Content? And if I end up using InnerHTML then whats the point of styling the filled class?

4

see here content - CSS | MDN

in the way you are using it, works only for pseudo elements