提问者:小点点

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


我正在学习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


共1个答案

匿名用户

两个问题:

  • 1--您需要将valueonclick()处理程序传递给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>