Question

我试图在这两个数字的文本框中发生密钥时添加两个数字。我希望它使用jquery所以我的附加代码是这些：

HTML：

<div class="container">
<h1>jQuery live Try</h1>
<form>
    <input type="text" placeholder="Number 1" class="num1 key">
    <input type="text" placeholder="Number 2" class="num2 key">
    <br><br>
    Sum: <input type="text" class="sum" readonly="readonly"><br><br><br>
</form>
</div>

Jquery的：

$(document).ready(function(){
        $(".sum").val("0");
        $(".key").val("");

        function calc(){
        var $num1=$(".num1").val();
        var $num2=$(".num2").val();
        $(".sum").val($num1+$num2);
    }
    $(".key").keyup(function(){
        calc();
    });
});

但如果我输入1和2，则输出12而不是3.如何输出总和？

The js fiddle

Answer 1

使用parseInt()将string转换为Number

function calc() {
    var $num1 = ($(".num1").val() != "" && !isNaN($(".num1").val())) ? parseInt($(".num1").val()) : 0;
    var $num2 = ($(".num2").val() != "" && !isNaN($(".num2").val())) ? parseInt($(".num2").val()) : 0;
    $(".sum").val($num1 + $num2);
}

您的整体代码应如下所示：

＆＃13;

$(document).ready(function() {
    $(".sum").val("0");
    $(".key").val("");

    function calc() {

        var $num1 = ($.trim($(".num1").val()) != "" && !isNaN($(".num1").val())) ? parseInt($(".num1").val()) : 0;
        console.log($num1);
        var $num2 = ($.trim($(".num2").val()) != "" && !isNaN($(".num2").val())) ? parseInt($(".num2").val()) : 0;
        console.log($num2);
        $(".sum").val($num1 + $num2);
    }
    $(".key").keyup(function() {
        calc();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<h1>jQuery live Try</h1>
	<form>
		<input type="text" placeholder="Number 1" class="num1 key">
		<input type="text" placeholder="Number 2" class="num2 key">
		<br><br>
		Sum: <input type="text" class="sum" readonly="readonly"><br><br><br>
	</form>
</div>

＆＃13;

Answer 2

.val()方法返回string，string 1 + string 2 = 12。所以使用parseFloat方法。

更改

var $num1=$(".num1").val();
var $num2=$(".num2").val();

以

var $num1=parseFloat($(".num1").val()); var $num2=parseFloat($(".num2").val());

Answer 3

jQuery返回的值是string，因此您必须将值转换为integers：

var $num1=parseInt($(".num1").val(), 10) || 0;
var $num2=parseInt($(".num2").val(), 10) || 0;
$(".sum").val($num1+$num2);

Demo

如果您想支持parseFloat()，请使用floating numbers。

另一种可能性是使用Number() - 函数，因为这会自动转换一个空字符串：

var $num1=Number($(".num1").val());
var $num2=Number($(".num2").val());

Demo 2

<强>参考

parseInt()

Number()

Answer 4

您应该将字符串表示解析为Integer

var $num1=parseInt($(".num1").val());
var $num2=parseInt($(".num2").val());

jQuery自动从文本字段添加两个数字

4 个答案: