Question

当用户单击“购买”并且购物车中没有任何物品时，应该向用户发出警报，但是，它没有响应。运行该程序时，它说它无法读取未定义的addEventListener属性。有什么办法解决这个问题和购物车问题吗？

var removeCartItemButtons = document.getElementsByClassName('btn-danger')
for (var i = 0; i < removeCartItemButtons.length; i++) {
    var button = removeCartItemButtons[i]
    button.addEventListener('click', removeCartItem)
}

var quantityInputs = document.getElementsByClassName('cart-quantity-input')
for (var i = 0; i < quantityInputs.length; i++) {
    var input = quantityInputs[i]
    input.addEventListener('change', quantityChanged)
}

var addToCartButtons = document.getElementsByClassName('shop-item-button')
for (var i = 0; i < addToCartButtons.length; i++) {
    var button = addToCartButtons[i]
    button.addEventListener('click', addToCartClicked)
}

document.getElementsByClassName('btn-purchase')[0].addEventListener("click", purchaseClicked);

function purchaseClicked() {	

    if (document.getElementsByClassName('cart-items')[0].hasChildNodes){
        alert('Thanks!')
    }	
    else {
        alert("There is nothing in your cart!");
    }
}

<section class="container content-section">
    <h2 class="heading">CART</h2>
    <div class="cart-row">
        <span class="cart-item cart-header cart-column">ITEM</span>
        <span class="cart-price cart-header cart-column">PRICE</span>
        <span class="cart-quantity cart-header cart-column">QUANTITY</span>
    </div>
    <div class="cart-items">
    </div>
    <div class="cart-total">
        <strong class="cart-total-title">Total</strong>
        <span class="cart-total-price">$0</span>
    </div>
    <button class="btn btn-primary btn-purchase" type="button">PURCHASE</button>
</section>

Answer 1

您遇到问题的两个主要原因

原因1： 如评论中所述，hasChildNodes是一个函数，表示其后需要括号，即hasChildNodes()

原因2： 为了使hasChildNodes()返回true，调用者节点实际上必须为空。这意味着它不能包含任何东西，即使是空格

例如：<div></div>的子节点为否，而<div> </div>的子节点为空白。

我对您的代码进行了相应的编辑，并且可以正常工作（即，我在hasChildNodes()中添加了括号，并删除了div变为<div class="cart-items"></div>的空格和换行符）

var removeCartItemButtons = document.getElementsByClassName('btn-danger')
for (var i = 0; i < removeCartItemButtons.length; i++) {
    var button = removeCartItemButtons[i]
    button.addEventListener('click', removeCartItem)
}

var quantityInputs = document.getElementsByClassName('cart-quantity-input')
for (var i = 0; i < quantityInputs.length; i++) {
    var input = quantityInputs[i]
    input.addEventListener('change', quantityChanged)
}

var addToCartButtons = document.getElementsByClassName('shop-item-button')
for (var i = 0; i < addToCartButtons.length; i++) {
    var button = addToCartButtons[i]
    button.addEventListener('click', addToCartClicked)
}

document.getElementsByClassName('btn-purchase')[0].addEventListener("click", purchaseClicked);

function purchaseClicked() {	

    if (document.getElementsByClassName('cart-items')[0].hasChildNodes()){
        alert('Thanks!')
    }	
    else {
        alert("There is nothing in your cart!");
    }
}

<html>
<body>

<section class="container content-section">
    <h2 class="heading">CART</h2>
    <div class="cart-row">
        <span class="cart-item cart-header cart-column">ITEM</span>
        <span class="cart-price cart-header cart-column">PRICE</span>
        <span class="cart-quantity cart-header cart-column">QUANTITY</span>
    </div>
    <div class="cart-items"></div>
    <div class="cart-total">
        <strong class="cart-total-title">Total</strong>
        <span class="cart-total-price">$0</span>
    </div>
    <button class="btn btn-primary btn-purchase" type="button">PURCHASE</button>
</section>	

</body>
</html>

为什么hasChildNodes对于空节点返回true？

1 个答案: