如何解决：无法读取未定义的属性“值”

Question

我正在尝试获取 quantityElement 的值，因此当数量下降/上升时，我可以使价格变化减少/增加，但我为了使其工作，我需要获取 quantityElement 的值，该值不断返回为未定义控制台。

 var removeCartitemButtons = document.getElementsByClassName('remove-btn') console.log(removeCartitemButtons) for (var i = 0; i < removeCartitemButtons.length; i++) { var button = removeCartitemButtons[i] button.addEventListener('click', function(event) { console.log('clicked') var buttonClicked = event.target buttonClicked.parentElement.parentElement.remove() updateCartTotal() }) } // Update Cart total price function updateCartTotal() { var cartItemContainer = document.getElementsByClassName('cart-items')[0] var cartRows = cartItemContainer.getElementsByClassName('cart-info') for (var i = 0; i < cartRows.length; i++) { var cartRow = cartRows[i] var priceElement = cartRow.getElementsByClassName('product-price')[0] var quantityElement = cartRow.getElementsByClassName('quantity-value') [0] var price = parseFloat(priceElement.innerText.replace('R', '')) var quantity = quantityElement.value console.log(price * quantity) } }

 <td> <div class="cart-items"> <div class="cart-info"> <img src="images/men3(balenciaga).png" width="250px"> <span class="product-price">R7400</span> </div> <span class="cart-item-title">Balenciaga Speed High</span> </div> <br> <button class="remove-btn" type="button">Remove</button> </div> </div> </div> </td> <td><input class="quantity-value" type="number" value="1"></td> </tr>

Answer 1

您正在尝试在 cartRow 中获取 'quantity-value' 字段，但它在 'cart-info' div 中不存在，因此您将此值设为未定义。

var quantityElement = cartRow.getElementsByClassName('quantity-value')[0]

您的 html 应该如下所示：

 var removeCartitemButtons = document.getElementsByClassName('remove-btn') console.log(removeCartitemButtons) for (var i = 0; i < removeCartitemButtons.length; i++) { var button = removeCartitemButtons[i] button.addEventListener('click', function(event) { console.log('clicked') var buttonClicked = event.target buttonClicked.parentElement.remove() // updateCartTotal() }) }

 <td> <div class="cart-items"> <div class="cart-info"> <img src="images/men3(balenciaga).png" width="450px"> <span class="product-price">R7401</span> <input class="quantity-value" type="number" value="1"> </div> <span class="cart-item-title">Balenciaga Speed High1</span> <button class="remove-btn" type="button">Remove1</button> </div> </td> <td> <div class="cart-items"> <div class="cart-info"> <img src="images/men3(balenciaga).png" width="450px"> <span class="product-price">R7402</span> <input class="quantity-value" type="number" value="2"> </div> <span class="cart-item-title">Balenciaga Speed High2</span> <button class="remove-btn" type="button">Remove2</button> </div> </td> <td> <div class="cart-items"> <div class="cart-info"> <img src="images/men3(balenciaga).png" width="450px"> <span class="product-price">R7403</span> <input class="quantity-value" type="number" value="3"> </div> <span class="cart-item-title">Balenciaga Speed High3</span> <button class="remove-btn" type="button">Remove3</button> </div> </td>