My displayCart() method never seems to execute and I dont know why

this is the code to my shopping cart for my website. Everything works correctly except for the displayCart() method. There is no syntax errors but it never gets executed but I'm not sure why.

let productsPage = document.querySelectorAll('.addToCart');

let products = [
    {
        name: 'wheyProtein',
        tag: 'whey',
        price : 799,
        inCart: 0
    },
    {
        name: 'wheyProtein1',
        tag: 'whey1',
        price : 299,
        inCart: 0
    },
    {
        name: 'wheyProtein2',
        tag: 'whey2',
        price : 299,
        inCart: 0
    },
    {
        name: 'wheyProtein3',
        tag: 'whey3',
        price :349,
        incart: 0
    },
    {
        name: 'wheyProtein4',
        tag: 'whey4',
        price : 330,
        inCart: 0
    },
    {
        name: 'wheyProtein5',
        tag: 'whey5',
        price : 299,
        inCart: 0
    },
]
for(let i=0; i<productsPage.length;i++){
    productsPage[i].addEventListener('click',() => {
        cartNumbers(products[i]);
        totalCost(products[i]);
    })

  
}

function onLoadCartNumbers(){
    let productNumbers = localStorage.getItem('cartNumbers');
    if(productNumbers){
    //document.querySelector('.cart span').textContent = productNumbers;
    }
}

function cartNumbers(product){

    let productNumbers = localStorage.getItem('cartNumbers');

    productNumbers = parseInt(productNumbers);

if(productNumbers){
localStorage.setItem('cartNumbers', productNumbers+1);
//document.querySelector('.span').textContent=productNumbers+1;
}else{
localStorage.setItem('cartNumbers', 1);
//document.querySelector('.span').textContent=1;
}
setItem(product);
}

function setItem(product){
let cartItems = localStorage.getItem('ProductsInCart');
cartItems = JSON.parse(cartItems);

if(cartItems != null){

    if(cartItems[product.tag] == undefined){
        cartItems = {
            ...cartItems,
            [product.tag]: product
        }
    }
    cartItems[product.tag].inCart += 1;
}else{
    product.inCart = 1;
    cartItems={
         [product.tag]: product
     }  
}
 
localStorage.setItem("ProductsInCart",JSON.stringify(cartItems));
}

function totalCost(product){
    console.log("products price is",product.price);
    console.log("working");

    let cartCost = localStorage.getItem('totalCost');
    console.log("my cartcost is", cartCost);



if(cartCost != null){
cartCost = parseInt(cartCost);
localStorage.setItem("totalCost", cartCost+ product.price);
}else{
    localStorage.setItem("totalCost", product.price);
}
}

function displayCart() {
    console.log("working cart");
     let cartItems = localStorage.getItem("productsInCart");
     cartItems = JSON.parse(cartItems);
      let productContainer = document.querySelector("products-container");
      let cartCost = localStorage.getItem('totalCost');
 
     if(cartItems && productContainer){
         productContainer.innerHTML = '';
     Object.values(cartItems).map(item =>{
        productContainer.innerHTML += ` 
        <div class="product">
        <ion-icon name="close-circle"><ion-icon>
        <img src="${item.tag}.jpg">
        <span>${item.name}</span>
        </div>
        <div class ="price">${item.price},00</div>
        <div class ="quantity"><ion-icon class = "decrease" name = "arrow-dropleft-circle"></ion-icon><span>${item.incart}</span><ion-icon class="increase" name ="arrow-dropright-circle"></ion-icon></div>
        <div class="total">
        ${item.incart * item.price},00
        </div>
        `
     });

     productContainer.innerHTML += `
     <div class="baskerTotalContainer">
     <h4 class="baskerTotalTitle">
     Basket Total
     </h4>
     <h4 class = "baskerTotal">
     R${cartCost},00
     </h4>
     `;

     }
}
onLoadCartNumbers();
displayCart();

Im calling the method at the end of the code but I tried a console.log inside of the displayCart() method which justs confirms it never gets executed.