I can't seem to retrieve the value of my input, as quantityElement.Value consistently returns undefined.
Here is the section of my HTML and JS that I am struggling with. In my JavaScript function, the quantityElement always gives me an undefined when trying to access the input's value.
This is my HTML:
<section class="container content-section">
<h2 class="section-header">CART</h2>
<div class="cart-items">
<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-row">
<div class="cart-item cart-column">
<img class="cart-item-img" src="Images/product-1.jpg" width="100" height="100">
<span class="cart-item-title">T-Shirt</span>
</div>
<span class="cart-price cart-column">$19.99</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>
</div>
<div class="cart-row">
<div class="cart-item cart-column">
<img class="cart-item-img" src="Images/product-3.jpg" width="100" height="100">
<span class="cart-item-title">PANTS</span>
</div>
<span class="cart-price cart-column">$19.99</span>
<div class="cart-quantity cart-column">
<input class="cart-quantity-input" type="number" value="2">
<button class="btn btn-danger" type="button">REMOVE</button>
</div>
</div>
</div>
<div class="cart-total">
<span class="cart-total-title">Total</span>
<span class="cart-total-price">$39.98</span>
</div>
<button class="btn btn-primary btn-purchase" type="button">PURCHASE</button>
</section>
Javascript:
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 = parseFloat(quantityElement.value);
total = total + price * quantity;
}
document.getElementsByClassName("cart-total-price")[0].innerText = total;
}