[英]Shopping Cart with JavaScript
I'm building a shopping cart with Vanilla JavaScript and i'm trying with Console.Log to show price of product "$19.99" when i click button to remove the product, but it's not showing nothing in Console.Log and i think problem is with html but i cannot find it, any idea? 我正在使用Vanilla JavaScript构建一个购物车,我正在尝试使用Console.Log来显示产品价格“$ 19.99”,当我点击按钮删除产品时,但它在Console.Log中没有显示任何内容,我认为问题是用HTML但我找不到它,任何想法?
<div class="click-cart">
<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="olp">
<div class="lakn">
<img class="shop-item-cart" src="https://cdn.thewirecutter.com/wp-content/uploads/2018/04/canon-dslrs-march-2018-2x1-lowres3496.jpg">
<span class="shop-title">Album 1</span>
<span class="shop-price">$19.99</span>
<input class="quantity-input" type="number" value="1">
<button class="delete-cart">X</button>
</div></div>
<div class="clear-checkout">
<button class="checkout">Checkout</button>
<button class="clear-cart">Clear Cart</button></div>
<div class="cart-items">
</div>
<div class="cart-total">
<strong class="cart-total-title">Total</strong>
<span class="cart-total-price">$10.79</span>
</div>
for (let i = 0; i < removeCartItemButtons.length; i++) {
let button = removeCartItemButtons[i]
button.addEventListener('click', function (event) {
let buttonCliked = event.target
buttonCliked.parentElement.parentElement.remove()
updateCartTotal ()
})
}
function updateCartTotal () {
let cartItemContainer = document.querySelector('.click-cart');
let cartRows = cartItemContainer.querySelector('.cart-row');
for (let i = 0; i < cartRows.length; i++) {
let cartRow = cartRows[i]
let priceElement = cartRow.querySelector('.shop-price');
let quantityElement = cartRow.querySelector('.quantity-input');
let price = priceElement.innerText
console.log(price)
}
}```
<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>
The shop-price
element is not in the cart-row
div. shop-price
元素不在cart-row
div中。
Furthermore, your for loop would not run because cartRows
is not an array, instead it is a single HTMLElement
with a length of undefined
, use cartItemContainer.querySelectorAll('.cart-row')
to get an interable NodeList
instead. 此外,你的for循环不会运行因为cartRows
不是一个数组,而是一个长度undefined
的单个HTMLElement
,使用cartItemContainer.querySelectorAll('.cart-row')
来获得一个可互换的NodeList
。
Additionally, since you delete the element before you use the updateCartTotal function it is necessary to have a price variable preset to 0. 此外,由于在使用updateCartTotal函数之前删除了元素,因此必须将price变量预设为0。
function updateCartTotal () {
let cartItemContainer = document.querySelector('.click-cart');
let cartRows = cartItemContainer.querySelectorAll('.cart-row');
let price = 0;
for (let i = 0; i < cartRows.length; i++) {
let cartRow = cartRows[i]
let priceElement = cartRow.querySelector('.shop-price');
let quantityElement = cartRow.querySelector('.quantity-input');
if (priceElement) {
price += Number(priceElement.innerText.replace('$',''));
}
console.log(price);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.