javascript - 获取不是数字(NaN)错误 html/js

Question

首先单击单选按钮时出现 NaN 错误。该页面有一个 3 单选按钮，当我单击第一个按钮时，它说 NaN ，其余 2 个按钮没有响应

这是我的 HTML

<input type="hidden" name="totalamount" id="totalamount" value="<?php echo get_total_amount();?>" /

<input type="radio" name="rmr"  id="payment1" value="3" onclick="updatepayment(this.value)" />
<input type="radio" name="rmr"  id="payment2" value="5.5" onclick="updatepayment(this.value)" />
<input type="radio" name="rmr"  id="payment4" value="10" onclick="updatepayment(this.value)" />
<div id="finalamount">
</div>

我也提到了我的 JS

$(document).ready(function(){  
    $('input[name=rmr]').click(function () {  
        //make sure one is checked    
        if($('input[name=rmr]:checked').length > 0) {    
            $('#finalamount').html($("#totalamount").val() * $("input[name=rmr]:checked").val());    
        } 
    }); 
}); 

Answer 1

三件事:

1) 当您使用“totalamount”元素中的金额时，人们必须问:您确定吗

value="<?php echo get_total_amount();?>"

...正在输出有效数字？因为如果没有，那么代码

$('#finalamount').html($("#totalamount").val() * $("input[name=rmr]:checked").val());

...确实会导致NaN。 * 运算符将尝试将其两个操作数从字符串转换为数字，当然，如果该 PHP 代码输出的值不是有效数字(例如，如果它是“$0.00”或某事)，转换结果将为 NaN。 NaN 乘以 anything 就是 NaN。

This example “totalamount”元素中的无效金额会产生看起来与您所描述的行为非常相似的内容。 (该代码与您的代码不同，我做了一些非常简单的重构，请参见下文。但为了演示无效数字，这并不重要。)

2)问题文本中隐藏输入的末尾没有 > 。如果您直接复制粘贴，我想知道这是否会是问题所在？

3) 由于您使用的是 jQuery，因此不需要 onclick 属性。相反:

$(document).ready(function(){  
   $("input[name=rmr]").click(function(){
        var checked = $("input[name=rmr]:checked");
        updatePayment(this.value);
        if (checked.length > 0) { // make sure one is checked
        {    
            $("#finalamount").html( $("#totalamount").val() * checked.val() );    
        } 
    }); 
}); 

...假设您希望每次都调用 updatePayment。

Live example

将 updatePayment 折叠到主要的 click 行为中可以避免 DOM0(onclick 属性)处理程序的顺序可能存在的任何问题和 DOM2 处理程序(与 jQuery 一起使用的处理程序)被调用。