我正在学习JavaScript。我想对每个产品做小计,但我不知道为什么我一直得到nan
?这是我的代码。我找不到这个问题。可能数值出了问题还是怎么的?
null
var value;
var price = document.getElementById("price");
function priceTotal() {
var total = value * price;
document.getElementById("subtotal").innerText = total;
}
$('.increment-btn').click(function(e) {
e.preventDefault();
var incre_value = $(this).parents('.quantity').find('#qty-input').val();
var value = parseInt(incre_value, 10);
value = isNaN(value) ? 0 : value;
if (value < 100) {
value++;
$(this).parents('.quantity').find('#qty-input').val(value);
}
priceTotal();
});
$('.decrement-btn').click(function(e) {
e.preventDefault();
var decre_value = $(this).parents('.quantity').find('#qty-input').val();
var value = parseInt(decre_value, 10);
value = isNaN(value) ? 0 : value;
if (value > 1) {
value--;
$(this).parents('.quantity').find('#qty-input').val(value);
}
priceTotal();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="text-center" id="price">Rp. {{ number_format($cartlist->product->productprice)}}</td>
<td class="cart-product-quantity text-center" width="132px">
<div class="input-group quantity">
<div class="input-group-prepend decrement-btn changeQuantity" style="cursor: pointer">
<span class="input-group-text">-</span>
</div>
<input type="text" class="qty-input form-control text-center" maxlength="2" value="1" id="qty-input">
<div class="input-group-append increment-btn changeQuantity" style="cursor: pointer">
<span class="input-group-text">+</span>
</div>
</div>
</td>
<!-- <input style="text-align:center; width: 70px;" type="text" name="subtotal" id="subtotal" value="{{$cartlist->product->productprice}}" > -->
<td class="text-center">
<span id="subtotal">Rp. {{ number_format($cartlist->product->productprice)}}</span>
</td>
null
两个问题:
value
从onclick()
处理程序传递给priceTotal()
函数。我建议您快速浏览一下MDN Web文档:封装,特别是:封装是将数据和函数打包到一个组件(例如,一个类)中,然后控制对该组件的访问,使对象成为一个“黑盒”。
var price=document.getElementByID(“price”);
,然后在乘法中使用它。你不能那样做,你必须在乘法中使用一个数字,而不是HTML元素。此外,price元素甚至不是输入,因此您也不能使用它的val()
函数。我将其静态设置为1
以证明我的观点。null
var value;
var price = 1; // you can't use an element as an integer
function priceTotal(value) {
var total = value * price;
document.getElementById("subtotal").innerText = total;
}
$('.increment-btn').click(function(e) {
e.preventDefault();
var incre_value = $(this).parents('.quantity').find('#qty-input').val();
var value = parseInt(incre_value, 10);
value = isNaN(value) ? 0 : value;
if (value < 100) {
value++;
$(this).parents('.quantity').find('#qty-input').val(value);
}
priceTotal(value);
});
$('.decrement-btn').click(function(e) {
e.preventDefault();
var decre_value = $(this).parents('.quantity').find('#qty-input').val();
var value = parseInt(decre_value, 10);
value = isNaN(value) ? 0 : value;
if (value > 1) {
value--;
$(this).parents('.quantity').find('#qty-input').val(value);
}
priceTotal(value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="text-center" id="price">Rp. {{ number_format($cartlist->product->productprice)}}</td>
<td class="cart-product-quantity text-center" width="132px">
<div class="input-group quantity">
<div class="input-group-prepend decrement-btn changeQuantity" style="cursor: pointer">
<span class="input-group-text">-</span>
</div>
<input type="text" class="qty-input form-control text-center" maxlength="2" value="1" id="qty-input">
<div class="input-group-append increment-btn changeQuantity" style="cursor: pointer">
<span class="input-group-text">+</span>
</div>
</div>
</td>
<!-- <input style="text-align:center; width: 70px;" type="text" name="subtotal" id="subtotal" value="{{$cartlist->product->productprice}}" > -->
<td class="text-center">
<span id="subtotal">Rp. {{ number_format($cartlist->product->productprice)}}</span>
</td>