使用 jQuery .val(） 设置时在 <input> 中显示为 NaN 的数字

Number showing as NaN in <input> when set with jQuery .val()

本文关键字：input 数字 NaN 显示 val jQuery 设置 使用      更新时间：2023-09-26

我正在尝试使用jQuery设置输入字段的值val() 

$('[name="paytype1"]').change(function(){
    var total = big_total();
    total = parseFloat(total);
    total = total.toFixed(2);
    console.log(total);
    if(isNaN(total)) {
        alert(total);   
    }
    $('[name="pay1amt"]').val(total);
})

浏览器中显示的所有内容都是 NaN .

运行console.log(total)显示一个数字，例如 61.00，并且没有触发警报。

big_total()函数正确返回数字（它根据其他输入字段中的数字计算）。

function big_total() {
    var big_total = 0;
    $('.total').each(function(i){
        big_total = big_total + parseFloat($(this).val());
    });
    big_total = big_total.toFixed(2)    
    return big_total;
}

在 ajax 调用后，jQuery 将带有类总数的输入动态添加到页面中。 这是插入的 html：

<div class="grid_12 alpha omega line-items">
    <div class="grid_1">CH02<input type="hidden" name="item_code[]" value="CH02">
        <input type="hidden" name="item_id[]" value="1458">
    </div>
    <div class="grid_3">
        DVA Regular consult
        <input type="hidden" name="item_desc[]" value="Subsequent consultation">
        <input type="hidden" name="type[]" value="Service">
    </div>
    <div class="grid_1">
        <input type="text" size="3" name="qty[]" value="1" class="qty" max-length="3">
    </div>
    <div class="grid_2">
        <input type="text" size="7" name="sub_total[]" value="61.00" class="sub-total">
    </div>
    <div class="grid_1">
        <select name="tax[]">
            <option value="$taxitems[ID]">0%</option>
            <option value="$taxitems[ID]">10%</option>
        </select>
    </div>
    <div class="grid_2">
        <input type="text" size="7" name="total[]" value="61.00" class="total" readonly="">
    </div>
    <div class="grid_1 omega">
        <div class="remove_stock_line"><img src="images/collapse.png"></div>
    </div>
</div>

这是触发函数的下拉列表：

<div class="grid_8 alpha omega">
    <div class="grid_3 alpha">
        <select name="paytype1" class="pay_type">
            <option default="" value="nill"></option>
            <option value="cash">cash</option>
            <option value="HICAPs">HICAPs</option>
            <option value="EFTPOS">EFTPOS</option>
            <option value="Visa">Visa</option>
            <option value="Mastercard">Mastercard</option>
            <option value="American Express">American Express</option>
            <option value="Other card">Other card</option>
            <option value="EFT">EFT</option>
            <option value="Cheque">Cheque</option>  
        </select>
    </div>
    <div class="grid_3 omega">
        <input type="text" size="10" name="pay1amt" value="" onclick="select();" class="pay_values">
    </div>              
</div>

思潮？

这个函数没有任何问题。但是由于我们无法看到您的完整源代码，并且您没有共享您的big_total函数，因此我们只能推测。根据我的个人经验，我只看到两种可能的情况。

  1. big_total()返回一个非数字值或具有像$4339这样的前导非数字字符，因为parseFloat()忽略了除 period（.） 之外的尾随非数字字符，例如：83483a;lsdfad不会给你错误。但是，由于在控制台或警报中看不到任何错误，因此可以排除这种情况。
  2. 唯一的其他解释是，代码的其他部分正在覆盖此函数设置的值。

如果我是你，我会按照以下步骤进行调试。
我会替换：
var total = big_total()
跟：
var total = 1234.56;

如果您在$('[name="pay1amt"]')中看到结果，则问题出在big_total 中。如果您仍然看到 NaN，那么我会查看代码中的其他地方以查看值被覆盖的位置。

这与问题无关，但非常重要。
不要在函数 big_total() 中使用变量名big_total。Javascript 在从堆栈中存储和检索函数和变量时不区分它们。括号指示解释器执行函数，而括号的缺失指示解释器将其作为变量引用（不执行它）。

//Try this code
function hi(){
    //without parenthesis it is treated as a variable
    alert('without ()'n'n'+hi);
            return 6;
}
//with parenthesis it is executed as a function
alert('With () 'n'+ hi());

这正在工作 

function big_total() {
    var bg_total = 0;
    $('.total').each(function(i){
        bg_total = bg_total + parseFloat($(this).val());
    });
    big_total = bg_total.toFixed(2)    
    return bg_total;
}
$(document).ready(function(){
    $("[name='paytype1']").change(function(){
        var total = big_total();
        total = parseFloat(total);
        total = total.toFixed(2);
        console.log(total);
        if(isNaN(total)) {
            alert(total);   
        }
        $('input[name="pay1amt"]').val(total);
    });
});

更新

在 big_total() 函数中，$('.total')元素只是输入的一个类，其中出现次数为 1。 你为什么要用$.each

$('.total').each(function(i){
    big_total = big_total + parseFloat($(this).val());
});
//you can just replace the use of .each above to this in the big_total function, except you have special reason for that
bg_total = bg_total + parseFloat(".total").val());
<input type="text" size="7" name="total[]" value="61.00" class="total" readonly="">

当你在问题中说And all that is being shown in the browser is NaN. Running console.log(total) shows a number, e.g. 61.00, and no alert is being triggered.

  1. 仅当类 .total 的输入值以非数字开头时，才会显示 NaN。 那只是当您期望if(isNaN(total)) {alert(total);}工作时。
  2. 是的，console.log(total)显示值 61.00，因为 big_total（） 函数正确返回数字，但我不知道您是否已经处理好(it calculates from numbers in other input fields)

除此之外，您的问题应该得到解决。

相关文章：