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

Posted 2023-03-05

【中文标题】为啥我的 javascript 代码没有按预期工作

【英文标题】：Why my javascript code is not working as expected为什么我的 javascript 代码没有按预期工作

【发布时间】：2021-12-11 12:23:48

【问题描述】：

我正在尝试使用 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 时，它不起作用

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

【问题讨论】：

比较字符串会给你意想不到的结果，将字符串转换为数字。

【参考方案1】：

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

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

    ...