javascript 为什么无法将这些项目中的任何一个添加到购物车？

5uzkadbs  于 2023-02-02  发布在  Java
关注(0)|答案(3)|浏览(117)

当点击"添加到购物车"按钮时，没有任何React，但我看不到两段代码中缺少的任何内容，我已经包含了标记<script src="store.js" async></script>
任何建议都很棒。

if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded', ready)
} else {
    ready()
}

function ready() {
    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() {
    alert('Thank you for your purchase')
    var cartItems = document.getElementsByClassName('cart-items')[0]
    while (cartItems.hasChildNodes()) {
        cartItems.removeChild(cartItems.firstChild)
    }
    updateCartTotal()
}

function removeCartItem(event) {
    var buttonClicked = event.target
    buttonClicked.parentElement.parentElement.remove()
    updateCartTotal()
}

function quantityChanged(event) {
    var input = event.target
    if (isNaN(input.value) || input.value <= 0) {
        input.value = 1
    }
    updateCartTotal()
}

function addToCartClicked(event) {
    var button = event.target
    var shopItem = button.parentElement.parentElement
    var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
    var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
    var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src
    addItemToCart(title, price, imageSrc)
    updateCartTotal()
}

function addItemToCart(title, price, imageSrc) {
    var cartRow = document.createElement('div')
    cartRow.classList.add('cart-row')
    var cartItems = document.getElementsByClassName('cart-items')[0]
    var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
    for (var i = 0; i < cartItemNames.length; i++) {
        if (cartItemNames[i].innerText == title) {
            alert('This item is already added to the cart')
            return
        }
    }
    var cartRowContents = `
        <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" 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() {
    var cartItemContainer = document.getElementsByClassName('cart-items')[0]
    var cartRows = cartItemContainer.getElementsByClassName('cart-row')
    var total = 0
    for (var i = 0; i < cartRows.length; i++) {
        var cartRow = cartRows[i]
        var priceElement = cartRow.getElementsByClassName('cart-price')[0]
        var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
        var price = parseFloat(priceElement.innerText.replace('$', ''))
        var quantity = quantityElement.value
        total = total + (price * quantity)
    }
    total = Math.round(total * 100) / 100
    document.getElementsByClassName('cart-total-price')[0].innerText = '$' + total
}
<!DOCTYPE html>
<html>
    <head>
        <title>The Generics | Store</title>
        <meta name="description" content="This is the description">
        <script src="store.js" async></script>
    </head>
    <body>
        <header class="main-header">
            <nav class="main-nav nav">
            </nav>
        </header>
        <section class="container content-section">
            <h2 class="section-header">MUSIC</h2>
            <div class="shop-items">
                <div class="shop-item">
                    <span class="shop-item-title">Album 1</span>&nbsp;
                        <span class="shop-item-price">$12.99</span>
                        <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">Album 2</span>&nbsp;
                    <div class="shop-item-details">
                        <span class="shop-item-price">$14.99</span>
                        <button class="btn btn-primary shop-item-button"type="button">ADD TO CART</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">Album 3</span>&nbsp;
                        <span class="shop-item-price">$9.99</span>
                        <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">Album 4</span>&nbsp;
                        <span class="shop-item-price">$19.99</span>
                        <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
                    </div>
                </div>
            </div>
        </section>
        <section class="container content-section">
            <h2 class="section-header">MERCH</h2>
            <div class="shop-items">
                <div class="shop-item">
                    <span class="shop-item-title">T-Shirt</span>&nbsp;
                        <span class="shop-item-price">$19.99</span>
                        <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
                    </div>
                </div>
                <div class="shop-item">
                    <span class="shop-item-title">Coffee Cup</span>&nbsp;
                    <div class="shop-item-details">
                        <span class="shop-item-price">$6.99</span>
                        <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
                    </div>
                </div>
            </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">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>
        <footer class="main-footer">
            <div class="container main-footer-container">
                <ul class="nav footer-nav">
                    <li>
                        <a href="https://www.youtube.com" target="_blank">
                            &nbsp;</a></li>
                    <li>
                        <a href="https://www.spotify.com" target="_blank">
                            &nbsp;</a></li>
                    <li>
                        <a href="https://www.facebook.com" target="_blank">
                            &nbsp;</a></li>
                </ul>
            </div>
        </footer>
    </body>
</html>
JavaScript

3条答案

按热度按时间
xdnvmnnf

xdnvmnnf1#

问题是你试图找到一个名为"shop-item-image"的类，但是在你的代码中没有任何图像，所以你必须把图像添加到你的代码中。
因此，我在第一个产品中做了这个改变，效果很好。

<div class="shop-item">
   <!-- add this line in each product -->
   <span><img class="shop-item-image" src='https://placehold.it/50x50'></span>
   <span class="shop-item-title">Album 1</span>&nbsp;
   <span class="shop-item-price">$12.99</span>
    <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
</div>

//编辑
这个版本的一部分是响应用户的要求，提供一个代码的作品没有图像，他希望添加到购物车的作品只是由标题。
x一个一个一个一个x一个一个二个x

赞(0）分享  回复(0）举报  2023-02-02
7y4bm7vi

7y4bm7vi2#

尽管belgacemfahmi进行了修改，但您的代码中仍存在问题，这意味着您的应用无法正常工作。如果您添加了相册1和2，则无法添加相册3和4。您的HTML中存在多个错误，包括孤立的""和缺少父元素（您的addToCartClicked函数选择var shopItem = button. parentElement. parentElement）。您需要按如下方式修改您的HTML：< /div>在你的js中"eslint"显示错误"i"和"button"变量被声明了多次。你需要改变你的变量名，例如：变量删除按钮;添加按钮;变量i;var ii ...或将"var"替换为let。 var ii ... Or replace "var" with let.

// Change == to ===
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', ready)
} else {
  ready()
}

function ready() {
  var removeCartItemButtons = document.getElementsByClassName('btn-danger')
  /* "i" and button is declared several times and creates errors change the name of the variable 
  or replace "var" by "let" */
  for (let i = 0; i < removeCartItemButtons.length; i++) {
    let button = removeCartItemButtons[i]
    button.addEventListener('click', removeCartItem)
  }

  var quantityInputs = document.getElementsByClassName('cart-quantity-input')
  // "i" is already defined change the name of the variable or replace "var" by "let"
  for (let i = 0; i < quantityInputs.length; i++) {
    let input = quantityInputs[i]
    input.addEventListener('change', quantityChanged)
  }

  var addToCartButtons = document.getElementsByClassName('shop-item-button')
  // "i" is already defined change the name of the variable or replace "var" by "let"
  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 your purchase')
  var cartItems = document.getElementsByClassName('cart-items')[0]
  while (cartItems.hasChildNodes()) {
    cartItems.removeChild(cartItems.firstChild)
  }
  updateCartTotal()
}

function removeCartItem(event) {
  var buttonClicked = event.target
  buttonClicked.parentElement.parentElement.remove()
  updateCartTotal()
}

function quantityChanged(event) {
  var input = event.target
  if (isNaN(input.value) || input.value <= 0) {
    input.value = 1
  }
  updateCartTotal()
}

function addToCartClicked(event) {
  var button = event.target
  var shopItem = button.parentElement.parentElement
  var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
  var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
  addItemToCart(title, price)
  updateCartTotal()
}

function addItemToCart(title, price) {
  var cartRow = document.createElement('div')
  cartRow.classList.add('cart-row')
  var cartItems = document.getElementsByClassName('cart-items')[0]
  var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
  for (var i = 0; i < cartItemNames.length; i++) {
    // Change == to ===
    if (cartItemNames[i].innerText === title) {
      alert('This item is already added to the cart')
      return
    }
  }
  var cartRowContents = `
        <div class="cart-item cart-column">
            <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" 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() {
  var cartItemContainer = document.getElementsByClassName('cart-items')[0]
  var cartRows = cartItemContainer.getElementsByClassName('cart-row')
  var total = 0
  for (var i = 0; i < cartRows.length; i++) {
    var cartRow = cartRows[i]
    var priceElement = cartRow.getElementsByClassName('cart-price')[0]
    var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
    var price = parseFloat(priceElement.innerText.replace('$', ''))
    var quantity = quantityElement.value
    total = total + (price * quantity)
  }
  total = Math.round(total * 100) / 100
  document.getElementsByClassName('cart-total-price')[0].innerText = '$' + total
}
<head>
  <title>The Generics | Store</title>
  <meta name="description" content="This is the description">
  <script src="store.js" async></script>
</head>

<body>
  <header class="main-header">
    <nav class="main-nav nav">
    </nav>
  </header>
  <section class="container content-section">
    <h2 class="section-header">MUSIC</h2>
    <div class="shop-items">
      <div class="shop-item">
        <span class="shop-item-title">Album 1</span>&nbsp;
        <!-- Add "shop-item-details" like Album 2 -->
        <div class="shop-item-details">
          <span class="shop-item-price">$12.99</span>
          <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
        </div>
        <!-- Before close "shop-items" now close parent div -->
      </div>
      <div class="shop-item">
        <span class="shop-item-title">Album 2</span>&nbsp;
        <div class="shop-item-details">
          <span class="shop-item-price">$14.99</span>
          <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
        </div>
      </div>
      <div class="shop-item">
        <span class="shop-item-title">Album 3</span>&nbsp;
        <!-- Add "shop-item-details" like Album 2 -->
        <div class="shop-item-details">
          <span class="shop-item-price">$9.99</span>
          <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
        </div>
        <!-- Before close nothing now close parent -->
      </div>
      <div class="shop-item">
        <span class="shop-item-title">Album 4</span>&nbsp;
        <div class="shop-item-details">
          <span class="shop-item-price">$19.99</span>
          <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
        </div>
        <!-- Before close nothing now close parent -->
      </div>
      <!-- Before close nothing now close "shop-items" -->
    </div>
  </section>
  <section class="container content-section">
    <h2 class="section-header">MERCH</h2>
    <div class="shop-items">
      <div class="shop-item">
        <span class="shop-item-title">T-Shirt</span>&nbsp;
        <!-- Add "shop-item-details" like Coffee Cup -->
        <div class="shop-item-details">
          <span class="shop-item-price">$19.99</span>
          <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
        </div>
        <!-- Before close "shop-items" now close parent div -->
      </div>
      <div class="shop-item">
        <span class="shop-item-title">Coffee Cup</span>&nbsp;
        <div class="shop-item-details">
          <span class="shop-item-price">$6.99</span>
          <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
        </div>
      </div>
      <!-- Before close nothing now close "shop-items" -->
    </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">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>
  <footer class="main-footer">
    <div class="container main-footer-container">
      <ul class="nav footer-nav">
        <li>
          <a href="https://www.youtube.com" target="_blank">Youtube</a></li>
        <li>
          <a href="https://www.spotify.com" target="_blank">Spotify</a></li>
        <li>
          <a href="https://www.facebook.com" target="_blank">Facebook</a></li>
      </ul>
    </div>
  </footer>
</body>
赞(0）分享  回复(0）举报  2023-02-02
n1bvdmb6

n1bvdmb63#

如果要添加的项目在不同的页面中，不能将产品添加到购物车中吗？至于此代码片段，产品在同一页面中，购物车部分正好在产品部分的末尾。
我甚至试图添加不同的页面，如果购物车是空的，但无法..如果任何人可以帮助..请建议！！

赞(0）分享  回复(0）举报  2023-02-02
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com