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>