I can't type add to cart function

Question

I tried to create add to cart function and I received this error " cartBtn.addEventListener is not a function"

let productsApi = "./products.json";
document.addEventListener("DOMContentLoaded", function () {
  let products = document.querySelector("#products");
  async function fetchProdcuts(url) {
    let data = await fetch(url);
    let response = await data.json();
    for (let i = 0; i < response.length; i++) {
      products.innerHTML += `
<div class="card p-3 text-left mx-md-2 col-md-2 bg-light">
  <img class="card-img-top  h-100" src='${response[i].images}'>
  <div class="card-body">
    <h4 class="card-title">${response[i].title}</h4>
    <p class="card-text">${response[i].description}</p>
    <div class="productPriceContainer">
    <h3>${response[i].price} EGP</h3>
    <button class="btn cart btn-dark" data-id="${response.id}"> Add To cart</button>
</div>
</div>
`
}

    let showCart = document.querySelector("#showCart");
    showCart.addEventListener('click',function(e){
      let cartModal = document.querySelector("#cartModal");
      if (cartModal.style.display = "none") {
        cartModal.style.display = "block"
      }
      let xbtn = document.querySelector("#xbtn");
      xbtn.addEventListener('click',function () {
        cartModal.style.display = "none"
      })
      e.preventDefault()
    })
  }
  fetchProdcuts(productsApi);
});
let cartBtn = document.querySelectorAll('.cart');
cartBtn.addEventListener("click",console.log("Hello"))

BTW I'm a begineer in js and trying to create ecommerce project