[英]Getting undefined from input value
我無法獲得輸入的值,問題出在quantityElement.Value
上,它一直返回未定義的值。
因此,您將在下面找到我的 HTML 和 JS 中遇到問題的部分。 在我的 javascript function 中,當我嘗試獲取其輸入值時, quantityElement
一直給出未定義的值。
這是我的 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;
}
首先,我從這個元素中刪除了“購物車價格”class:
<span class=" cart-header cart-column">PRICE</span>
並向按鈕添加“onclick”
<button onclick="updateCartTotal()" class="btn btn-primary btn-purchase" type="button">PURCHASE</button>
然后,從 js 中更改一些內容,例如:
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 = document.getElementsByClassName("cart-price")[0];
var quantityElement = document.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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.