为什么我的购物车不能正确更新总数
why wont my shopping cart update the total correctly
我的购物车一直有效（运行 总计），直到我删除了一个项目，然后总数读取了我删除该项目之前的最后一个总数，肯定是某个地方的拼写错误，但我已经看了 3 天了现在有帮助吗？
错误信息：
cart.js:154 Uncaught TypeError: 无法读取未定义的 属性 'innerText'
在 updateCartTotal (cart.js:154) 在 HTMLButtonElement.removeCartItem (cart.js:52)
对于明天到期的学校项目，我正在关注简化的网络开发，但我显然在某个地方迷路了
if(document.readyState == "loading")
{
document.addEventListener("DOMContentLoaded", ready)
}
else
{
ready()
}
function ready ()
{
//get the btn-danger class as a variable
var removeCartItemButtons = document.getElementsByClassName("btn-danger")
//loop through the buttons waiting for them to be clicked and then perform the function to remove them from the cart
for (var i = 0; i < removeCartItemButtons.length; i++)
{
var button = removeCartItemButtons[i]
button.addEventListener("click", removeCartItem)
}
//fix quantity updating the total and stopping negative cart quantities
var quantityInputs = document.getElementsByClassName("cart-quantity-input")
//loop throught the quantities listening for when the input changes its value
for (var i = 0; i < quantityInputs.length; i++)
{
//input = whatever iteration we are on
var input = quantityInputs[i]
//listen for a change and execute function "quantityChanged"
input.addEventListener("change", quantityChanged)
}
//creating the javascript for all add to cart buttons on the site
var addToCartButtons = document.getElementsByClassName("shop-item-button")
//constantly looping throught the buttons waiting for an event
for (var i = 0; i < addToCartButtons.length; i++)
{
//whatever button is clicked executes the function
var button = addToCartButtons[i]
button.addEventListener("click", addToCartClicked)
}
}
function removeCartItem(event)
{
//on the function event the target of the event is to remove boththe element its inside and also the element that that element is inside... the double parentElement
var buttonClicked = event.target
buttonClicked.parentElement.parentElement.remove()
//call the function that updates the total price
updateCartTotal ()
}
//this function is what we want to do when the quantity value is changed
function quantityChanged(event)
{
//get the quantity in the input
var input = event.target
//check if theres a number in the input and that it is at least 1
if (isNaN(input.value) || input.value <= 0)
{
input.value = 1
}
//once we no theres is a valid number entered, call the function to update the cart again
updateCartTotal()
}
//the function executed when add to cart buttons are clicked
function addToCartClicked(event)
{
//initialises the button as the event target
var button = event.target
//getting the parent div the button is in
var shopItem = button.parentElement
//getting the div where the details of the product is
var title = shopItem.getElementsByClassName("details")[0].innerText
//the price of the product
var price = shopItem.getElementsByClassName("price")[0].innerText
//and the src of the product
var imageSrc = shopItem.getElementsByClassName("shop-item-image")[0].src
console.log(title,price, imageSrc)
addItemToCart(title, price, imageSrc)
updateCartTotal()
}
//creating a new method for adding all this into the cart keeping the title price and imageSource variables with the function
function addItemToCart(title, price, imageSrc)
{
//creating an empty div
var cartRow = document.createElement("div")
cartRow.classList.add("cart-row")
//adding the newly created cart row to the cart items
var cartItems = document.getElementsByClassName("cart-items")[0]
//stop duplicate items in the cart
//get the names of all the items
var cartItemNames = cartItems.getElementsByClassName("cart-item-title")
//loop through the names
for (var i = 0; i < cartItemNames.length; i++)
{
//check if the names in the cart equal to the title I am adding
if(cartItemNames[i].innerText == title)
{
//alert that the item is already in the cart
alert("this item is already in your cart")
return
}
}
//show what to put into the rows and replace the image, title and price on each new item
var cartRowContents = `
<div class="cart-row">
<div class="cart-item cart-column">
<img class="cart-item-image"src="${imageSrc}" width="100" height="100">
<span class="cart-item-title">${title}</span>
</div>
<span class="cart-price cart-column">${price}</span>
<div class="cart-quantity cart-column">
<input class="cart-quantity-input" type="number" value="1">
<button class="btn btn-danger">Remove</button>
</div>`
cartRow.innerHTML = cartRowContents
//add the items onto the cart
cartItems.append(cartRow)
//event listener for the remove button
cartRow.getElementsByClassName("btn-danger")[0].addEventListener("click", removeCartItem)
//event listener for quantity changed
cartRow.getElementsByClassName("cart-quantity-input")[0].addEventListener("change", quantityChanged)
}
function updateCartTotal ()
{
//get the first cart items element
var cartItemContainer = document.getElementsByClassName("cart-items")[0]
//get the cart rows but only from the cart items
var cartRows = cartItemContainer.getElementsByClassName("cart-row")
//initialise the total
var total = 0
//loop through the cart rows for price and quantity
for (var i = 0; i < cartRows.length; i++)
{
var cartRow = cartRows[i]
//get the first pricee
var priceElement = cartRow.getElementsByClassName("cart-price")[0]
//get the quantity
var quantityElement = cartRow.getElementsByClassName("cart-quantity-input")[0]
//Get the information from inside the element not just the element itself, replace the euro sign with nothing and make it a Number
var price = parseFloat(priceElement.innerText.replace("€", ""))
//get the quantity and multiply it by the price for the running total
var quantity = quantityElement.value
total = total + (price * quantity)
}
//multiplying the totoal by 100 and divinding by 100 again will round the total to stop any .999999999998's showing up
total = Math.round(total * 100) / 100
//update the total price add the euro sign back in
document.getElementsByClassName("cart-total-price")[0].innerText = "€" + total
}
感谢任何能帮助我的人
价格元素为空。 cart-row 元素中似乎没有带有 class cart-price 的元素。
尝试添加 var cartRows = cartItemContainer.getElementsByClassName("cart-row")[0]。我相信这会解决问题。它适用于我的代码。
我的购物车一直有效（运行 总计），直到我删除了一个项目，然后总数读取了我删除该项目之前的最后一个总数，肯定是某个地方的拼写错误，但我已经看了 3 天了现在有帮助吗？ 错误信息： cart.js:154 Uncaught TypeError: 无法读取未定义的 属性 'innerText' 在 updateCartTotal (cart.js:154) 在 HTMLButtonElement.removeCartItem (cart.js:52) 对于明天到期的学校项目，我正在关注简化的网络开发，但我显然在某个地方迷路了
if(document.readyState == "loading")
{
document.addEventListener("DOMContentLoaded", ready)
}
else
{
ready()
}
function ready ()
{
//get the btn-danger class as a variable
var removeCartItemButtons = document.getElementsByClassName("btn-danger")
//loop through the buttons waiting for them to be clicked and then perform the function to remove them from the cart
for (var i = 0; i < removeCartItemButtons.length; i++)
{
var button = removeCartItemButtons[i]
button.addEventListener("click", removeCartItem)
}
//fix quantity updating the total and stopping negative cart quantities
var quantityInputs = document.getElementsByClassName("cart-quantity-input")
//loop throught the quantities listening for when the input changes its value
for (var i = 0; i < quantityInputs.length; i++)
{
//input = whatever iteration we are on
var input = quantityInputs[i]
//listen for a change and execute function "quantityChanged"
input.addEventListener("change", quantityChanged)
}
//creating the javascript for all add to cart buttons on the site
var addToCartButtons = document.getElementsByClassName("shop-item-button")
//constantly looping throught the buttons waiting for an event
for (var i = 0; i < addToCartButtons.length; i++)
{
//whatever button is clicked executes the function
var button = addToCartButtons[i]
button.addEventListener("click", addToCartClicked)
}
}
function removeCartItem(event)
{
//on the function event the target of the event is to remove boththe element its inside and also the element that that element is inside... the double parentElement
var buttonClicked = event.target
buttonClicked.parentElement.parentElement.remove()
//call the function that updates the total price
updateCartTotal ()
}
//this function is what we want to do when the quantity value is changed
function quantityChanged(event)
{
//get the quantity in the input
var input = event.target
//check if theres a number in the input and that it is at least 1
if (isNaN(input.value) || input.value <= 0)
{
input.value = 1
}
//once we no theres is a valid number entered, call the function to update the cart again
updateCartTotal()
}
//the function executed when add to cart buttons are clicked
function addToCartClicked(event)
{
//initialises the button as the event target
var button = event.target
//getting the parent div the button is in
var shopItem = button.parentElement
//getting the div where the details of the product is
var title = shopItem.getElementsByClassName("details")[0].innerText
//the price of the product
var price = shopItem.getElementsByClassName("price")[0].innerText
//and the src of the product
var imageSrc = shopItem.getElementsByClassName("shop-item-image")[0].src
console.log(title,price, imageSrc)
addItemToCart(title, price, imageSrc)
updateCartTotal()
}
//creating a new method for adding all this into the cart keeping the title price and imageSource variables with the function
function addItemToCart(title, price, imageSrc)
{
//creating an empty div
var cartRow = document.createElement("div")
cartRow.classList.add("cart-row")
//adding the newly created cart row to the cart items
var cartItems = document.getElementsByClassName("cart-items")[0]
//stop duplicate items in the cart
//get the names of all the items
var cartItemNames = cartItems.getElementsByClassName("cart-item-title")
//loop through the names
for (var i = 0; i < cartItemNames.length; i++)
{
//check if the names in the cart equal to the title I am adding
if(cartItemNames[i].innerText == title)
{
//alert that the item is already in the cart
alert("this item is already in your cart")
return
}
}
//show what to put into the rows and replace the image, title and price on each new item
var cartRowContents = `
<div class="cart-row">
<div class="cart-item cart-column">
<img class="cart-item-image"src="${imageSrc}" width="100" height="100">
<span class="cart-item-title">${title}</span>
</div>
<span class="cart-price cart-column">${price}</span>
<div class="cart-quantity cart-column">
<input class="cart-quantity-input" type="number" value="1">
<button class="btn btn-danger">Remove</button>
</div>`
cartRow.innerHTML = cartRowContents
//add the items onto the cart
cartItems.append(cartRow)
//event listener for the remove button
cartRow.getElementsByClassName("btn-danger")[0].addEventListener("click", removeCartItem)
//event listener for quantity changed
cartRow.getElementsByClassName("cart-quantity-input")[0].addEventListener("change", quantityChanged)
}
function updateCartTotal ()
{
//get the first cart items element
var cartItemContainer = document.getElementsByClassName("cart-items")[0]
//get the cart rows but only from the cart items
var cartRows = cartItemContainer.getElementsByClassName("cart-row")
//initialise the total
var total = 0
//loop through the cart rows for price and quantity
for (var i = 0; i < cartRows.length; i++)
{
var cartRow = cartRows[i]
//get the first pricee
var priceElement = cartRow.getElementsByClassName("cart-price")[0]
//get the quantity
var quantityElement = cartRow.getElementsByClassName("cart-quantity-input")[0]
//Get the information from inside the element not just the element itself, replace the euro sign with nothing and make it a Number
var price = parseFloat(priceElement.innerText.replace("€", ""))
//get the quantity and multiply it by the price for the running total
var quantity = quantityElement.value
total = total + (price * quantity)
}
//multiplying the totoal by 100 and divinding by 100 again will round the total to stop any .999999999998's showing up
total = Math.round(total * 100) / 100
//update the total price add the euro sign back in
document.getElementsByClassName("cart-total-price")[0].innerText = "€" + total
}
感谢任何能帮助我的人
价格元素为空。 cart-row 元素中似乎没有带有 class cart-price 的元素。
尝试添加 var cartRows = cartItemContainer.getElementsByClassName("cart-row")[0]。我相信这会解决问题。它适用于我的代码。