Class element isn’t identified?

I’m new to html/css/js and i am trying to make a open and close cart for my pretend ecommerce website. The problem is when cart icon is onclick, it doesn’t open so I think it isn’t declared properly. I was following a tutorial on this until this part, I can’t figure out why.

Here’s the html:

        <div class="header">
        <div class="navbar">
        <div class="logo">
            <a href="/index.html"><h1>Homeflix</h1></a>
        </div>
        <nav>
            <ul>
                <li><a href="/shop.html">Shop</a></li>
                <li><a href="">About Us</a></li>
                <li><a href="">Support</a></li>
                <li><img src="/img/cart.png" width="20px" height="20px" id="cart-icon"></li>
            </ul>
        </nav>
        <!--Cart-->
        <div class="cart">
            <h2 class="cart-title">Your Cart</h2>
            <!--Cart Content-->
            <div class="cart-content">
                <div class="cart-box">
                    <img src="/img/smnwh.jpg" alt="" class="cart-img">
                    <div class="detail-box">
                        <div class="cart-product-title">Spider-man No Way Home</div>
                        <div class="cart-price">$75.00</div>
                        <input type="number" value="1" class="cart-quantity">
                    </div>
                    <!--Remove Cart-->
                    <i class="fa-solid fa-trash-can cart-remove"></i>
                </div>
                <!--Total-->
                <div class="total">
                    <div class="total-title">Total</div>
                    <div class="total-price">$0</div>
                </div>
                <!--Buy Button-->
                <button type="button" class="btn-buy">Buy Now</button>
                <!--Cart Close-->
                <i class="fa-solid fa-xmark" id="close-cart"></i>
            </div>
        </div>
    </div>

Here’s my CSS:

.cart {
    position:fixed;
    top: 0;
    right:-100%;
    width:360px;
    min-height: 100vh;
    padding: 20px;
    background: var(--bg-color);
    box-shadow: -2px 0 4px hsl(0 4% 15% / 10%);
    transition: 0.3s;
}
.cart:active {
    right:0;
}

And here’s my JS:

let cartIcon = document.querySelector("#cart-icon");
let cart = document.querySelector(".cart");
let closeCart = document.querySelector("#close-cart");



cartIcon.onclick = () => {
    console.log("pass");
    cart.classList.add("active");
}
closeCart.onclick = () => {
    console.log("close");
    cart.classList.remove("active");
}