购物车和呼叫 Id/classes

Question

好的，我解决了我的房地产项目的大部分问题。我无法解决的最后一个问题是我的 updateCartTotal 函数。我收到错误消息“无法在 updateCartTotal 设置未定义的属性” 我尝试在 querySelector 和 getElementsByClassName 之间切换，从我的函数中取出零，更改目标元素，似乎没有任何效果。我知道这可能很简单，但我无法弄清楚。 HTML 文件如下：

<section class="container content-section">
       <h2 class="section-header">View Properties</h2>
       <div id="propertyContainer" class="propertyItems1"></div>
   </section>

  <section class="container content-section">
    <h2 class="section-header">CART</h2>
    <div class="cart-row">
      <span class="cart-item cart-header cart-column">Listing</span>
      <span class="cart-avgPrice cart-header cart-column">PRICE</span>
      <span class="cart-propType cart-header cart-column">Property Type</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">[=11=]</span>
    </div>
      <button class="btn btn-primary btn-purchase" type="button">PURCHASE</button>
 </section>

这是我的 js 文件的代码：

//Recapture Data
let propertyItems1= document.getElementsByClassName(`#propertyItems1`);
let allItems  = propertyContainer.getElementsByClassName(`fullAddress propType avgPrice`);
let data1 = [].map.call(allItems, fullAddress => fullAddress.textContent);
let data2 = [].map.call(allItems, propType => propType.textContent);
let data3 = [].map.call(allItems, avgPrice => fullAddress.textContent);

//Shopping Cart Functionality
if (document.readyState == 'loading') {
  document.addEventListner('DOMContentLoaded', ready)
} else {
   ready()
}
function ready() {
    console.log("running the ready() function")
let removeItemButtons = document.getElementsByClassName('btn-danger')
for (let i = 0; i < removeItemButtons.length; i++) {
  let button = removeItemButtons[i]
  button.addEventListener('click', removeCartItem)
  }
  let quantityInputs = document.getElementsByClassName('cart-quantity-input')
  for (let i = 0; i < quantityInputs.length; i++) {
    let input = quantityInputs[i]
    input.addEventListner('change', quantityChanged)
  }
  let addToCartButtons = document.getElementsByClassName('property-item-button')
  for (let i = 0; i < addToCartButtons.length; i++) {
    let button = addToCartButtons[i]
    button.addEventListener('click', addToCartClicked)
  }

document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked)
}

function purchaseClicked() {
  alert('Thank You for purchasing a home')
  let cartItems = document.getElementsByClassName('cart-items')[0]
  while(cartItems.hasChildNodes()) {
    cartItems.removeChild(cartItems.firstChild)
  }
  updateCartTotal()
}

function removeCartItem(event) {
  let buttonClicked = event.target
  buttonClicked.parentElement.remove
  updateCartTotal()
}
function quantityChanged(event) {
  let input = event.target
  if(isNaN(input.value) || input.value <= 0) {
  input.value = 1
  }
  updateCartTotal()
}

function addToCartClicked(event) {
  let button = event.target
  let propertyItems1 = button.parentElement
  let fullAddress = propertyItems1.querySelector('.fullAddress').innerText
    let propType = propertyItems1.getElementsByClassName('propType').innerText
  let avgPrice = propertyItems1.getElementsByClassName('avgPrice').innerText
  addItemToCart(fullAddress,propType,avgPrice)
  updateCartTotal()

}

function addItemToCart(fullAddress, propType, avgPrice) {
    let cartRow = document.createElement('div')
    cartRow.classList.add('cart-row')
    let cartItems = document.getElementsByClassName('cart-items')[0]
    let cartItemNames = cartItems.getElementsByClassName('cart-item-fullAddress')
    for (var i = 0; i < cartItemNames.length; i++) {
        if (cartItemNames[i].innerText == fullAddress) {
            alert('This item is already added to the cart')
            return
        }
    }

    let cartRowContents = `
        <div class="cart-item cart-column">
            <span class="fullAddress">${fullAddress}</span>
                        <span class="propType">${propType}</span>
        </div>
        <span class="cart-avgPrice cart-column">${avgPrice}</span>
        <div class="cart-quantity cart-column">
            <input class="cart-quantity-input" type="number" value="1">
            <button class="btn btn-danger" type="button">REMOVE</button>
        </div>`
    cartRow.innerHTML = cartRowContents
    cartItems.append(cartRow)
    cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
    cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
}

function updateCartTotal() {
    let cartItemContainer = document.getElementsByClassName('cart-items')[0]
    let cartRows = cartItemContainer.getElementsByClassName('cart-row')
    let total = 0
    for (let i = 0; i < cartRows.length; i++) {
        let cartRow = cartRows[i]
        let avgPriceElement = cartRow.getElementsByClassName('cart-avgPrice')[0]
        let quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
        let avgPrice = parseFloat(avgPriceElement.innerText.replace('$', ''))
        let quantity = quantityElement.value
        total = total + (avgPrice * quantity)
    }
    total = Math.round(total * 100) / 100
    document.getElementsByClassName('cart-total-avgPrice')[0].innerText = '$' + total
}

请帮助我的项目即将到期。

Answer 1

您 class 的 cart-avgPrice 拼写错误。变化

document.getElementsByClassName('cart-total-avgPrice')[0].innerText = '$' + total

至

document.getElementsByClassName('cart-avgPrice')[0].innerText = '$' + total

购物车和呼叫 Id/classes

Shopping Cart and Calling Id/classes

html

javascript

dom-manipulation

dom-events