為什么我的javascript代碼沒有按預期作業

我正在嘗試使用 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, '$1');"/>
                                        </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 時，它不起作用

我只想在輸入的數量大于可用數量時顯示此錯誤訊息。

uj5u.com熱心網友回復：

正如評論中所說，在比較之前嘗試將輸入值（字串）轉換為數字。所以它會是這樣的：

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

標籤：javascript html if 语句 dom html-输入

上一篇：如何從ReactJS中的其他兄弟組件傳遞props值

下一篇：dd($request->all())通過ajaxlaravel上傳檔案時的空陣列