为什么我的 javascript 代码没有按预期工作

Question

我正在尝试使用 JavaScript 验证文本字段。我有一个可用字段和一个数量字段。当输入的数量大于可用数量时，我想在数量字段下方给出消息。

我试过的是：

<form method="post" action="/saveBid" id="reviewForm">
                                    <input type="hidden" name="_token" value="{{csrf_token()}}" />
                                    <input type="hidden" name="truck_name" value="{{truck_name}}" />
                                    <input type="hidden" name="user_name" value="{{auth_user().first_name}}" />
                                    <input type="hidden" name="seller_id" value="{{seller_id}}" />
                                    <div class="form-group row">
                                        <label class="col-sm-4 col-form-label">Select Milege Gap: </label>
                                        <div class="col-sm-8">
                                        <select class="form-select" name="mileage" id="mileage" onchange="getOption()">
                                            <option>Select </option>
                                            {% for p in product_data %}
                                            <option value="{{p.price}},{{p.number_of_products}},{{p.name}},{{p.id}},{{p.number_of_products_sold}}">{{p.name}}</option>
                                            {% endfor %}
                                        </select>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="available" class="col-sm-4 col-form-label">Available Quantity: </label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" id="available" readonly name="available_qty" />
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="truck" class="col-sm-4 col-form-label">Price: </label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" readonly id="truck" name="truck" />
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="qty"  class="col-sm-4 col-form-label"> Quantity: </label>
                                        <div class="col-sm-8">
                                            <input type="text" id="qty" name="qty"  class="form-control"  oninput="checkInput(this);" required />
                                            <p id="qty-msg">
                                            </p>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="t_price"  class="col-sm-4 col-form-label"> Total Price: </label>
                                        <div class="col-sm-8">
                                            <input type="text" readonly id="t_price" name="t_price"  class="form-control" />
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="inputBid"  class="col-sm-4 col-form-label">Enter Bid Price</label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" id="inputBid" name="bid" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '');"/>
                                        </div>
                                    </div>
                                    <div class="form-group text-center">
                                        <input type="submit" class="btn btn-primary" id="btn" name="send" value="Send" disabled="disabled">
                                    </div>
                                </form>

Javascript代码：

 <script>

function getOption()
    {
        var select = document.getElementById('mileage');
        var option = select.options[select.selectedIndex];
        var opArr = option.value.split(",");
        
        var price=document.getElementById("truck");
        price.value=opArr[0];
        var available=opArr[1]-opArr[4];
        
        document.getElementById("available").value=available;
        if(available<=0)
            {
                alert('Out of Stock');
                document.getElementById("qty").disabled=true;
                document.getElementById("inputBid").disabled=true;
            }
            }
function checkInput(item)
    {
        
        var t_price=document.getElementById("t_price");
        var available=document.getElementById("available");
        var price=document.getElementById("truck");
        var msg=document.getElementById("qty-msg");
        
        if(item.value>available.value)
            { 
                alert("Quantity" +item.value +"Availabe: "+available.value);
                item.value='';
                msg.innerHTML="* Value must be less than Availabe quantity "+available.value;
                msg.style.color="red";
            }
        
        t_price.value=price.value*item.value;
        
    }
</script>

我运行这段代码，如果可用数量为15，输入的数量为1，则可以正常工作。但是，当输入的数量不是 1，如 2、3 或任何其他数量时，它会给出消息。我希望只在数量大于 15 如 16、17 等时给出消息。但是当我尝试输入 12 时，没问题。当我尝试输入 3、4 等时，它会给出验证消息。同理，如果可用数量为20，则输入数量2即可。但是 3 或任何 2 都不起作用。为什么会这样。为什么我的 javascript 无法正常工作。

我的输出

当我尝试输入 3 时，这发生在我的输出中

当我尝试在数量字段中输入 2 时，没问题

当我尝试输入 12 时，它起作用了

当我尝试输入 4 时，它不起作用

我只想在输入的数量大于可用数量时显示此错误消息。

Answer 1

如评论中所述，在比较之前尝试将输入值（字符串）转换为数字。所以它会是这样的：

if(parseInt(item.value)>parseInt(available.value))
{
    ...
}

为什么我的 javascript 代码没有按预期工作

Why my javascript code is not working as expected

html

javascript

dom

if-statement

html-input