Alert not getting triggered JS-CodePudding

i have made a program of a mock Shopping cart and ive recently tried to implement something that should prevent adding more than one instance of the same item inside the cart but the alert i have set up doesn't seem to trigger when i add the same item again into the cart.

Relevant Html

<div >
                <span >Cpu-1</span>
                <img  src="Images/Cpu-1.jpg">
                <div >
                    <span >$229.99</span>
                    <button  role="button">ADD TO CART</button>
                </div>
            </div>
            <div >
                <span >Cpu-2</span>
                <img  src="Images/Cpu-2.jpg">
                <div >
                    <span >$129.99</span>
                    <button  role="button">ADD TO CART</button>
                </div>
            </div>
        </div>
    </section>

    <section >
        <h2 >CART</h2>
        <div >
            <span >PRODUCT</span>
            <span >COST</span>
            <span >AMOUNT</span>
        </div>
        <div >
            <div >
                <div >
                <img  src="Images/R9-7950.jpg" width="100" height="100">
                <span >Ryzen 9-7950X</span>
            </div>
            <span >$799.99</span>
            <div >
                <form>
                <input  type="number" value="1" autocomplete="off">
                </form>
                <button  role="button">REMOVE</button>
            </div>
        </div>
        </section>
        <section>
        <div >
            <strong >SUM</strong>
            <span >$799.99</span>
        </div>
        <button  role="button">Check Out</button>
        </div>
    </section>

Relevant 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 >
            <img  src="${cpuImg}" width="100" height="100">
            <span >${cpuName}</span>
        </div>
        <span >${cpuPrice}</span>
        <div >
            <form>
            <input  type="number" value="1" autocomplete="off">
            </form>
            <button  role="button">REMOVE</button>
        </div>`
        cartRow.innerHTML = cartRowContents
    cartItems.append(cartRow)
}

CodePudding user response：

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 >
            <img  src="${cpuImg}" width="100" height="100">
            <span >${cpuName}</span>
        </div>
        <span >${cpuPrice}</span>
        <div >
            <form>
            <input  type="number" value="1" autocomplete="off">
            </form>
            <button  role="button">REMOVE</button>
        </div>`
  cartRow.innerHTML = cartRowContents
  cartItems.append(cartRow)
}

<div >
  <span >Cpu-1</span>
  <img  src="Images/Cpu-1.jpg">
  <div >
    <span >$229.99</span>
    <button  role="button">ADD TO CART</button>
  </div>
</div>
<div >
  <span >Cpu-2</span>
  <img  src="Images/Cpu-2.jpg">
  <div >
    <span >$129.99</span>
    <button  role="button">ADD TO CART</button>
  </div>
</div>

<section >
  <h2 >CART</h2>
  <div >
    <span >PRODUCT</span>
    <span >COST</span>
    <span >AMOUNT</span>
  </div>
  <div >
    <div >
      <div >
        <img  src="Images/R9-7950.jpg" width="100" height="100">
        <span >Ryzen 9-7950X</span>
      </div>
      <span >$799.99</span>
      <div >
        <form>
          <input  type="number" value="1" autocomplete="off">
        </form>
        <button  role="button">REMOVE</button>
      </div>
    </div>
  </div>
</section>
<section>
  <div >
    <strong >SUM</strong>
    <span >$799.99</span>
  </div>
  <button  role="button">Check Out</button>
</section>

As mentioned in the comments there is no such property as innertext. You have a typo. And another problem was wrong class name var cartItemNames = cartItems.getElementsByClassName('checkout-item')