警告不要触发JS

Question

我已经制作了一个模拟购物车的程序，最近我尝试实现一些应该防止在购物车中添加同一项的多个实例的东西，但是当我再次将同一项添加到购物车中时，我设置的警报似乎不会触发。

相关Html

<div class="store-item">
                <span class="product-name">Cpu-1</span>
                <img class="cpu-image" src="Images/Cpu-1.jpg">
                <div class="product-details">
                    <span class="item-price">$229.99</span>
                    <button class="btn btn-primary item-button" role="button">ADD TO CART</button>
                </div>
            </div>
            <div class="store-item">
                <span class="product-name">Cpu-2</span>
                <img class="cpu-image" src="Images/Cpu-2.jpg">
                <div class="product-details">
                    <span class="item-price">$129.99</span>
                    <button class="btn btn-primary item-button" role="button">ADD TO CART</button>
                </div>
            </div>
        </div>
    </section>

    <section class="container text-content">
        <h2 class="section-head">CART</h2>
        <div class="cart-row">
            <span class="cart-item cart-header cart-column">PRODUCT</span>
            <span class="cart-price cart-header cart-column">COST</span>
            <span class="cart-quantity cart-head cart-column">AMOUNT</span>
        </div>
        <div class="cart-items">
            <div class="cart-row">
                <div class="cart-item cart-column">
                <img class="checkout-cpu" src="Images/R9-7950.jpg" width="100" height="100">
                <span class="checkout-item">Ryzen 9-7950X</span>
            </div>
            <span class="cart-column cart-price">$799.99</span>
            <div class="cart-quantity cart-column">
                <form>
                <input class="checkout-input" type="number" value="1" autocomplete="off">
                </form>
                <button class="btn btn-warning" role="button">REMOVE</button>
            </div>
        </div>
        </section>
        <section>
        <div class="cart-total">
            <strong class="cart-sum">SUM</strong>
            <span class="cart-sum-amount">$799.99</span>
        </div>
        <button class="btn btn-primary btn-checkout" role="button">Check Out</button>
        </div>
    </section>

相关JavaScript

var addToCartButtons = document.getElementsByClassName('item-button')
    for (var i = 0; i < addToCartButtons.length; i++) {
        var button = addToCartButtons[i]
        button.addEventListener('click', addToCartClicked)
    }
}

function addToCartClicked(event) {
    var button = event.target
    var shopItem  = button.parentElement.parentElement
    var cpuName = shopItem.getElementsByClassName('product-name')[0].innerHTML
    var cpuPrice = shopItem.getElementsByClassName('item-price')[0].innerHTML
    var cpuImg = shopItem.getElementsByClassName('cpu-image')[0].src
    addItemToCart(cpuName, cpuPrice, cpuImg)
}

function addItemToCart(cpuName, cpuPrice, cpuImg) {
    var cartRow = document.createElement('div')
    cartRow.classList.add('cart-row')
    var cartItems = document.getElementsByClassName('cart-items')[0]
    var cartItemNames = cartItems.getElementsByClassName('product-name')
    for (var i = 0; i < cartItemNames.length; i++) {
        if (cartItemNames[i].innertext == cpuName) {
            alert('item already in cart')
            return
        }
    }
    var cartRowContents = `
        <div class="cart-item cart-column">
            <img class="checkout-cpu" src="${cpuImg}" width="100" height="100">
            <span class="checkout-item">${cpuName}</span>
        </div>
        <span class="cart-column cart-price">${cpuPrice}</span>
        <div class="cart-quantity cart-column">
            <form>
            <input class="checkout-input" type="number" value="1" autocomplete="off">
            </form>
            <button class="btn btn-warning" role="button">REMOVE</button>
        </div>`
        cartRow.innerHTML = cartRowContents
    cartItems.append(cartRow)
}

Answer 1

​

var addToCartButtons = document.getElementsByClassName('item-button')
for (var i = 0; i < addToCartButtons.length; i++) {
  var button = addToCartButtons[i]
  button.addEventListener('click', addToCartClicked)
}

function addToCartClicked(event) {
  var button = event.target
  var shopItem = button.parentElement.parentElement
  var cpuName = shopItem.getElementsByClassName('product-name')[0].innerHTML
  var cpuPrice = shopItem.getElementsByClassName('item-price')[0].innerHTML
  var cpuImg = shopItem.getElementsByClassName('cpu-image')[0].src
  addItemToCart(cpuName, cpuPrice, cpuImg)
}

function addItemToCart(cpuName, cpuPrice, cpuImg) {
  var cartRow = document.createElement('div')
  cartRow.classList.add('cart-row')
  var cartItems = document.getElementsByClassName('cart-items')[0]
  var cartItemNames = cartItems.getElementsByClassName('checkout-item')
  for (var i = 0; i < cartItemNames.length; i++) {
    if (cartItemNames[i].innerText == cpuName) {
      alert('item already in cart')
      return
    }
  }

  var cartRowContents = `
        <div class="cart-item cart-column">
            <img class="checkout-cpu" src="${cpuImg}" width="100" height="100">
            <span class="checkout-item">${cpuName}</span>
        </div>
        <span class="cart-column cart-price">${cpuPrice}</span>
        <div class="cart-quantity cart-column">
            <form>
            <input class="checkout-input" type="number" value="1" autocomplete="off">
            </form>
            <button class="btn btn-warning" role="button">REMOVE</button>
        </div>`
  cartRow.innerHTML = cartRowContents
  cartItems.append(cartRow)
}

<div class="store-item">
  <span class="product-name">Cpu-1</span>
  <img class="cpu-image" src="Images/Cpu-1.jpg">
  <div class="product-details">
    <span class="item-price">$229.99</span>
    <button class="btn btn-primary item-button" role="button">ADD TO CART</button>
  </div>
</div>
<div class="store-item">
  <span class="product-name">Cpu-2</span>
  <img class="cpu-image" src="Images/Cpu-2.jpg">
  <div class="product-details">
    <span class="item-price">$129.99</span>
    <button class="btn btn-primary item-button" role="button">ADD TO CART</button>
  </div>
</div>

<section class="container text-content">
  <h2 class="section-head">CART</h2>
  <div class="cart-row">
    <span class="cart-item cart-header cart-column">PRODUCT</span>
    <span class="cart-price cart-header cart-column">COST</span>
    <span class="cart-quantity cart-head cart-column">AMOUNT</span>
  </div>
  <div class="cart-items">
    <div class="cart-row">
      <div class="cart-item cart-column">
        <img class="checkout-cpu" src="Images/R9-7950.jpg" width="100" height="100">
        <span class="checkout-item">Ryzen 9-7950X</span>
      </div>
      <span class="cart-column cart-price">$799.99</span>
      <div class="cart-quantity cart-column">
        <form>
          <input class="checkout-input" type="number" value="1" autocomplete="off">
        </form>
        <button class="btn btn-warning" role="button">REMOVE</button>
      </div>
    </div>
  </div>
</section>
<section>
  <div class="cart-total">
    <strong class="cart-sum">SUM</strong>
    <span class="cart-sum-amount">$799.99</span>
  </div>
  <button class="btn btn-primary btn-checkout" role="button">Check Out</button>
</section>

​

正如注释中提到的，不存在innertext这样的属性。你有个打字错误。另一个问题是类名var cartItemNames = cartItems.getElementsByClassName('checkout-item')错误