将数字乘以Document.getElementById（“myId”）时获取NaN值

Question

我正在学习JavaScript。我想对每个产品做小计，但我不知道为什么我一直得到nan？这是我的代码。我找不到这个问题。可能数值出了问题还是怎么的？

null

js prettyprint-override">    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

Answer 1

两个问题：

• 1--您需要将value从onclick()处理程序传递给priceTotal()函数。我建议您快速浏览一下MDN Web文档：封装，特别是:

封装是将数据和函数打包到一个组件（例如，一个类）中，然后控制对该组件的访问，使对象成为一个“黑盒”。

• 2--您将price设置为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>