jQuery自动从文本字段中添加两个数字 [英] jQuery automatic add two numbers from text fields

问题描述

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

HTML：

 < div class =container> 
< h1> jQuery live Try< / h1> 
< form> 
< input type =textplaceholder =Number 1class =num1 key> 
< input type =textplaceholder =Number 2class =num2 key> 
< br>< br> 
总和：< input type =textclass =sumreadonly =readonly>< br>< br>< br> 
< / form> 
< / div> 
  

Jquery：

 < code $ $（document）.ready（function（）{
 $（。sum）。val（0）; 
 $（。key）。val（ ）; 
 
函数calc（）{
 var $ num1 = $（。num1）。val（）; 
 var $ num2 = $（。num2 ）.val（）; 
 $（。sum）.val（$ num1 + $ num2）; 
} 
 $（.key）。keyup（function（）{
 calc（）; 
}）; 
}）; 
  

但是如果我输入1和2，它输出12不是3.我怎样才能输出总和？

js小提琴

解决方案使用 parseInt（）来转换 string code> to 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）; 
} 
  

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

 < script src =https：//ajax.googleapis .com / ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script>< div class =container> < h1> jQuery live Try< / h1> <形式> < input type =textplaceholder =Number 1class =num1 key> < input type =textplaceholder =Number 2class =num2 key> <峰; br><峰; br>总和：< input type =textclass =sumreadonly =readonly>< br>< br>< br> < / form>< / div>  

I am trying to add two numbers whenever a keyup happens in the textboxes of those two numbers. I want it to use jquery so my addition code is these:

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();
    });
});

But if i enter 1 and 2 it outputs 12 not 3. How can I make it output the sum?

The js fiddle

解决方案

use parseInt() to convert string to 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);
}

Your overall code should look like this:

$(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();
    });
});

<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>

这篇关于jQuery自动从文本字段中添加两个数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！