将两个数字相乘在文本字段中输入,并使用jquery提醒答案

时间:2017-02-10 19:49:55

标签: javascript jquery

我创建了2个数字的总和,但现在想要使用乘数两个数字来更改此代码。

    <html>
    <head>
    <title>Jquery</title>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $('.ck').click(function(){
                var a=parseInt($('.n1').val());
                var b=parseInt($('.n2').val());
                var c=a+b;
                alert("The sum is " + c);
            })
        })

    </script>
</head>
<body>
    Enter Number 1<input type="text" class="n1"/><br/>
    Enter Number 2<input type="text" class="n2"/><br/>
    <input type="button" value="Add" class="ck"/>
</body>
    </html>

2 个答案:

答案 0 :(得分:1)

在javascript中乘以两个数字的方法是使用运算符*

您的新代码如下所示,将+替换为*

    <html>
    <head>
    <title>Jquery</title>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $('.ck').click(function(){
                var a=parseInt($('.n1').val());
                var b=parseInt($('.n2').val());
                var c=a * b;
                alert("The sum is " + c);
            })
        })

    </script>
</head>
<body>
    Enter Number 1<input type="text" class="n1"/><br/>
    Enter Number 2<input type="text" class="n2"/><br/>
    <input type="button" value="Add" class="ck"/>
</body>
    </html>

答案 1 :(得分:0)

处理乘法

如果您想将这两个数相乘而不是相加,只需将运算符从加法+更改为乘法*

var c = a * b;
alert("The sum is " + c);

处理多组值

如果您想处理多组两个数字,那么您可能希望以不同的方式构建代码。考虑使用CSS类“分组”您的两个值,然后按预期获得结果:

$(function() {
  $('input').on('input', function() {
    // Find the closest set and recalculate it
    var set = $(this).closest('.set');
    // Get your values
    var n1 = parseInt(set.find('.n1').val() || 0);
    var n2 = parseInt(set.find('.n2').val() || 0);
    // Set their result
    set.find('.result').val(n1 * n2);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='set'>
  <input class='n1' />*
  <input class='n2' />=
  <input class='result' disabled />
</div>
<div class='set'>
  <input class='n1' />*
  <input class='n2' />=
  <input class='result' disabled />
</div>