Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

JavaScript
1

Tell us what’s happening:

I spent hours trying to debug this problem. May you all please help me? not passing 7 and 8 tests

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

<ul class="item-list">
    <li>a<span class="favorite-icon">&#9825</span></li>
    <li>b<span class="favorite-icon">&#9825</span></li>
    <li>c<span class="favorite-icon">&#9825</span></li>


</ul>


</body>

</html>

/* file: styles.css */


/* file: script.js */
const spans = document.querySelectorAll(".favorite-icon");

spans.forEach((span) => {
  span.addEventListener("click", () => {
    if (span.classList.contains("filled")) {
      span.classList.remove("filled");
      span.innerHTML = "&#9825;"; 
    } else {
      span.classList.add("filled");
      span.innerHTML = "&#10084;";  
    }
  });
});

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Challenge Information:

Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

2

how did you link the script file in your html?

3

I added
<script src="script.js"></script>
but still not working. Any solution?

4

share your update code please

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

5 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Favorite Items</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>

<body>
    <ul class="item-list">
        <li>a<span class="favorite-icon">&#9825;</span></li>
        <li>b<span class="favorite-icon">&#9825;</span></li>
        <li>c<span class="favorite-icon">&#9825;</span></li>
    </ul>
</body>

</html>


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

spans.forEach((span) => {
  span.addEventListener("click", () => {
    if (span.classList.contains("filled")) {
      span.classList.remove("filled");
      span.innerHTML = "&#9825;"; // Empty heart
    } else {
      span.classList.add("filled");
      span.innerHTML = "&#10084;";  // Filled heart
    }
  });
});
6

Use console.log() to print out some variables. Test them to see if they work.

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

How would you test spans and find out if this line worked?

1 Like
7

put the script right before the </body> closing tag, defer doesn’t work here

1 Like
8

Thank you. I never expected this. So, the location of script is matter.

9

yes, because defer doesn’t work

if you write the script in the head then it is loaded before the html exists, so many things don’t work

2 Likes
10

In the fCC editor that is. Just to be clear.

1 Like