how to fix: Cannot read property 'value' of undefined

Question

I am trying to get the value of the quantityElement so i can make the price change decrease/increase when the quantity goes down/up but i order for this to work i need to get the value of the quantityElement which keeps coming back as undefined in the console.

var removeCartitemButtons = document.getElementsByClassName('remove-btn')
console.log(removeCartitemButtons)
for (var i = 0; i < removeCartitemButtons.length; i++) {
  var button = removeCartitemButtons[i]
  button.addEventListener('click', function(event) {
     console.log('clicked')
     var buttonClicked = event.target
     buttonClicked.parentElement.parentElement.remove()
     updateCartTotal()
  })
}


// Update Cart total price

function updateCartTotal() {
var cartItemContainer = document.getElementsByClassName('cart-items')[0]
var cartRows = cartItemContainer.getElementsByClassName('cart-info')
for (var i = 0; i < cartRows.length; i++) {
  var cartRow = cartRows[i]
  var priceElement = cartRow.getElementsByClassName('product-price')[0]
  var quantityElement = cartRow.getElementsByClassName('quantity-value')
  [0]
 var price = parseFloat(priceElement.innerText.replace('R', ''))
var quantity = quantityElement.value
 console.log(price * quantity)
}
}

<td>
        
        <div class="cart-items">
            <div class="cart-info">
                <img src="images/men3(balenciaga).png" width="250px">
            <span class="product-price">R7400</span>
            </div>
                    <span class="cart-item-title">Balenciaga Speed High</span>
                  
               </div>
                   <br>
               <button class="remove-btn" type="button">Remove</button>
        </div>
    </div>
</div>      
    </td>

    <td><input class="quantity-value" type="number" value="1"></td>
</tr>

Answer 1

You are trying to get 'quantity-value' field inside cartRow, but it does not exist inside the 'cart-info' div, because of which you are getting this value as undefined.

var quantityElement = cartRow.getElementsByClassName('quantity-value')[0]

Your html should probably be like below:

var removeCartitemButtons = document.getElementsByClassName('remove-btn')
console.log(removeCartitemButtons)
for (var i = 0; i < removeCartitemButtons.length; i++) {
  var button = removeCartitemButtons[i]
  button.addEventListener('click', function(event) {
     console.log('clicked')
     var buttonClicked = event.target
     buttonClicked.parentElement.remove()
     // updateCartTotal()
  })
}

<td>
  <div class="cart-items">
    <div class="cart-info">
      <img src="images/men3(balenciaga).png" width="450px">
      <span class="product-price">R7401</span>
      <input class="quantity-value" type="number" value="1">
    </div>
    <span class="cart-item-title">Balenciaga Speed High1</span>
    <button class="remove-btn" type="button">Remove1</button>            
   </div>
</td>
<td>
  <div class="cart-items">
    <div class="cart-info">
      <img src="images/men3(balenciaga).png" width="450px">
      <span class="product-price">R7402</span>
      <input class="quantity-value" type="number" value="2">
    </div>
    <span class="cart-item-title">Balenciaga Speed High2</span>
    <button class="remove-btn" type="button">Remove2</button>            
   </div>
</td>
<td>
  <div class="cart-items">
    <div class="cart-info">
      <img src="images/men3(balenciaga).png" width="450px">
      <span class="product-price">R7403</span>
      <input class="quantity-value" type="number" value="3">
    </div>
    <span class="cart-item-title">Balenciaga Speed High3</span>
    <button class="remove-btn" type="button">Remove3</button>            
   </div>
</td>