TypeError：无法读取未定义的属性“innerText” - 从 eshop 中删除

Question

我需要在这里寻求帮助。
我正在开发我的电子商店。除了从购物车中取出一个物体外，一切正常。当我这样做时，价格不会改变。在控制台中写着：

“未捕获的类型错误：无法在 updateCelkoveCeny (Eshop.js:86) 处读取未定义的属性 'innerText'

第 86 行是 parseFloat() 所在的行。有什么建议吗？

function updateCelkoveCeny() {
var produktyKosikContainer = document.getElementsByClassName('kosik-produkty')[0]
var radkyKosik = produktyKosikContainer.getElementsByClassName('kosik-radek')
var celkovaCena = 0
for (var i = 0; i < radkyKosik.length; i++) {
    var radekKosik = radkyKosik[i]
    var cenaElement = radekKosik.getElementsByClassName('kosik-cena')[0]
    var pocetElement = radekKosik.getElementsByClassName('kosik-pocet-input')[0]
    var cena = parseFloat(cenaElement.innerText.replace(',-', ''))
    var pocet = pocetElement.value
    celkovaCena = celkovaCena + (cena * pocet)
}
document.getElementsByClassName('kosik-celkem-cena')[0].innerText = celkovaCena + ",-"
}

编辑：这是我添加的元素，如果用户想将新产品添加到购物车。

function pridejPoKliknutiDoKosiku(event) {
var button = event.target
var produkt = button.parentElement.parentElement
var nazevProduktu = produkt.getElementsByClassName('eshop-nazev-produktu')[0].innerText
var cena = produkt.getElementsByClassName('eshop-cena-produktu')[0].innerText
var zdrojObrazku = produkt.getElementsByClassName('eshop-fotka-produktu')[0].src
pridejProduktDoKosiku(nazevProduktu, cena, zdrojObrazku)
updateCelkoveCeny()
 }
 function pridejProduktDoKosiku(nazevProduktu, cena, zdrojObrazku) {
var radekKosik = document.createElement('div')
radekKosik.classList.add('kosik-radek')
var kosikProdukty = document.getElementsByClassName('kosik-produkty')[0]
var NazvyProduktu = kosikProdukty.getElementsByClassName('kosik-nazev-produktu')
for (var i = 0; i < NazvyProduktu.length; i++) {
    if (NazvyProduktu[i].innerText == nazevProduktu) {
        alert("Tento produkt je již obsažen v košíku.")
        return
    }
}
var radekKosikKontent = `
    <div class="kosik-radek">
        <div class="kosik-produktu kosik-sloupec">
            <img class="kosik-fotka-produktu" src="${zdrojObrazku}" width="100" height="100"><br>
            <span class="kosik-nazev-produktu">${nazevProduktu}</span>
        </div>
        <span class="kosik-cena kosik-sloupec">${cena}</span>
        <div class="kosik-pocet kosik-sloupec">
            <input class="kosik-pocet-input" type="number" value="1" min="1">
            <button class="button-remove" type="button">Odstranit</button>
        </div>
    </div><br><br>`
radekKosik.innerHTML = radekKosikKontent
kosikProdukty.append(radekKosik)
radekKosik.getElementsByClassName("button-remove")[0].addEventListener('click', odstranitProduktyVKosiku)
radekKosik.getElementsByClassName('kosik-pocet-input')[0].addEventListener('change', pocetZmenen)

}

Answer 1

您的 DOM 中是否有包含 class 'kosik-cena' 的元素？如果是这样，您可以遍历数组以获取 innerText。很可能没有找到 class 'kosik-cena' 的元素。这样就不可能得到不存在的元素的innerText。很高兴能对您的HTML 提供一些见解。

获取元素数组的innerText：

var cenaElement = document.getElementsByClassName("kosik-cena");

for (var i = 0; i < cenaElement.length; i++) {
  var text = cenaElement[i].innerText;
  console.log(text);
}