Build a Favorite Icon Toggler - Step 8 and Step 9

JavaScript
1

Tell us what’s happening:

Step 8 & Step 9 are failing.
The clicking does not work on the FCC sandbox at all, but runs fine on my local Live Server (VSCode).
Also, on my Live Server, it works as expected, i.e. icons are getting updated.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Favorite Icon Toggler</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
    <div class="div-selection">
        <h1 class="title">Choose Favourites</h1>
        <ul class="item-list">
            <li><span>Description 1</span><span><button class="favorite-icon">&#9825;</button></span></li>
            <li><span>Description 1</span><span><button class="favorite-icon">&#9825;</button></span></li>
            <li><span>Description 1</span><span><button class="favorite-icon">&#9825;</button></span></li>
        </ul>
    </div>
</body>
</html>


/* file: styles.css */
*, *::before,*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.favorite-icon{
    margin: 2rem;
    margin-inline-start: 1rem;
    border:none;
    color: black;
    background-color: transparent;
    font-size: 2.5rem;
}

li{
    margin: 0;
    padding:0;
    font-size: 2rem;
    list-style: none;
    margin-inline: auto;
    max-width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-list{
    padding: 1rem 2rem;
    border: 2px black solid;
    width: 400px;
    margin-inline: auto;
}
.title{
    text-align: center;
    color: red;
    margin-block:1em;
}

.filled{
    color: red;
    
}

/* file: script.js */
const EMPTY = "&#9825;";
const FULL = "&#10084;";

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

buttons.forEach((button) => {
  button.addEventListener("click", () => setButton(button));
});

function setButton(button) {
  if (button.classList.contains("filled")) {
    button.classList.remove("filled");
    button.innerHTML = EMPTY;
  } else {
    button.classList.add("filled");
    button.innerHTML = FULL;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:147.0) Gecko/20100101 Firefox/147.0

Challenge Information:

Build a Favorite Icon Toggler - Build a Favorite Icon Toggler

2

Editor on page unfortunately doesn’t support the defer attribute correctly. If you move the script element (even with defer) after the body, everything will pass.