Mengapa saya mendapat Cannot read property of undefined (baca 'innerHTML')?

Question

Saya sedang mencipta troli beli-belah untuk tapak web e-dagang dan saya sedang mengemas kini jumlah harga item berkenaan dengan kuantiti, tetapi saya menjalankan ralat?

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; 

    }
}

Saya telah mencuba hampir semua yang saya fikir saya mungkin membuat kesilapan kecil di suatu tempat?

Answer 1

Sama ada nama kelas elemen ditulis salah (tidak mungkin kerana anda sudah menyemaknya 100 kali haha) atau anda cuba mengaksesnya sebelum membuat rendering.

1. Semak sama ada anda boleh mengalihkan skrip di bawah teg HTML yang mengandungi class="cart-box", sebaik-baiknya sebelum teg penutup.

2. Cuba laksanakan updatetotal() selepas DOM dimuatkan sepenuhnya:

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

3. Jika anda memaparkan elemen melalui Ajax selepas DOM dimuatkan sepenuhnya, anda boleh mencuba helah ini: tulis fungsi yang menyemak sama ada elemen itu wujud, jika tidak, tunggu beberapa saat dan panggil fungsi secara rekursif semula:

   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
        }
    }

Penyelesaian terakhir pastinya bukan yang terbaik, tetapi ia menyelesaikan tugas.