Getting NaN values when multiplying a number by document.getElementById('myid')

Question

I'm learning JavaScript. I want to make subtotal for each product and I don't know why I keep getting NaN ? Here is my code. I couldn't find the problem for this. Maybe there's something wrong with the value or something?

 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>

Answer 1

Two problems:

• 1 -- You need to pass value from the onClick() handler to the priceTotal() function. I recommend you take a quick glance atMDN Web Docs: Encapsulation , specifically:

Encapsulation is the packing of data and functions into one component (for example, a class) and then controlling access to that component to make a "blackbox" out of the object.

• 2 -- You are setting price to var price = document.getElementById("price"); and then using it in multiplication. You cannot do that, you must use a number in multiplication, not an HTML element. In addition, the price element is not even an input, so you can't use its val() function either. I set this statically to just 1 to prove my point.

 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>