Pourquoi est-ce que je reçois la propriété Impossible de lire undéfini (lire 'innerHTML') ?

Question

Je crée un panier pour un site e-commerce et je mets à jour le prix total de l'article par rapport à la quantité, mais j'ai une erreur ?

function updatetotal () {
    const cartContent = document.getElementsByClassName("cart-content")[0];
    const cartBoxes = cartContent.getElementsByClassName("cart-box");
    let total = 0;
    for (let i = 0; i < cartBoxes.length;i++) {
        const cartBox = cartBoxes[i];
        const priceElement = cartBox.getElementsByClassName("cart-price")[0];
        const quantityElement = cartBox.getElementsByClassName("cart-quanity");
        let price = parseFloat(priceElement.innerHTML.replace('$',''))
        const quantity = quantityElement.value;
        total+= price * quantity;
        document.getElementsByClassName("total-price")[0].innerText = '$' + total; 

    }
}

J'ai presque tout essayé. Je pense que je fais peut-être une petite erreur quelque part ?

Answer 1

Soit le nom de la classe d'élément est mal écrit (peu probable puisque vous l'avez déjà vérifié 100 fois haha), soit vous essayez d'y accéder avant le rendu.

1. Vérifiez si vous pouvez déplacer le script sous la balise HTML contenant class="cart-box", de préférence avant la balise de fermeture .

2. Essayez d'exécuter updatetotal() une fois le DOM complètement chargé :

   window.addEventListener("DOMContentLoaded", () => {
      updatetotal()
    });

3. Si vous effectuez le rendu d'un élément via Ajax après le chargement complet du DOM, vous pouvez essayer cette astuce : écrivez une fonction qui vérifie si l'élément existe, sinon, attendez quelques secondes et appelez à nouveau la fonction de manière récursive :

   let cartBoxes //Global
   
    const delay = ms => new Promise(res => (setTimeout(res, ms)));
   
    async function waitForCartBoxes() {
        cartBoxes = cartContent.getElementsByClassName("cart-box");
        if (cartBoxes.length == 0) { //Not found - wait 500ms and try again.
            await delay(500);
            waitForCartBoxes();
            return
        }
    }

La dernière solution n’est certainement pas la meilleure, mais elle fait le travail.