使用Jquery的算术运算

时间:2015-11-10 04:32:07

标签: javascript jquery

我有3个文本框,2个用于输入值,3个用于操作数,基于操作数输入它应该执行相关操作。

HTML

Num1:<input type="text" value=0 id="first"  class="box1"><br>
Num2:<input type="text" value=0 id="second" class="box2"><br>
Op:<input type="text" value="+" id="oper"   class="box3"><br>
<p id="demo"><b>Sum:0.00</b></p>

文档焦点的加载应该在第一个文本框上,应该完成必填字段的验证,结果应该固定为2个小数位。

Jquery的

$(document).ready(function () {
    $("#demo").focus();

    var x = parseInt($('#first').val());
    var y = parseInt($('#second').val());
    var z = $('#oper').val();

    $("#first,#second,#oper").onkeyup(function () {
        switch (z) {
        case ("+"):
            var a = ((x + y).toFixed(2));
            $('#demo').text("Sum:" + a);
            if ((isNaN(x) || x == "") && (isNaN(y) || y == "")) {
                $('#demo').text("Sum:Enter a valid number!");
            }
            break;
        case ("-"):
            var b = ((x - y).toFixed(2));
            $('#demo').text("Sub:" + b);
            if ((isNaN(x) || x == "") && (isNaN(y) || y == "")) {
                $('#demo').text("Sub:Enter a valid number!");
            }
            break;
        case ("*"):
            var c = ((x * y).toFixed(2));
            $('#demo').text("Mul:" + c);
            if ((isNaN(x) || x == "") && (isNaN(y) || y == "")) {
                $('#demo').text("Mul:Enter a valid number!");
            }
            break;
        case ("/"):
            var d = ((x / y).toFixed(2));
            $('#demo').text("Div:" + d);
            if ((isNaN(x) || x == "") && (isNaN(y) || y == "")) {
                $('#demo').text("Div:Enter a valid number!");
            }
            break;
        default:
            $('#demo').text("Invalid operator");
        }
    });
});

尝试修复错误,请任何人都可以帮助我!!

2 个答案:

答案 0 :(得分:0)

正如Tushar所说,事件是使用keyup而不是onkeyup处理的。

您需要将变量分配移动到keyup handler,因为您希望每次更改时都重新计算它们。

$(document).ready(function () {

    $("#first").focus();

    $("#first,#second,#oper").keyup(function () {

      var x = parseInt($('#first').val());
      var y = parseInt($('#second').val());
      var z = $('#oper').val();

        switch (z) {
         .... 

要关注第一个文本框,您需要关注第一个文本框ID,而不是p标记。

$("#first").focus();

这将按照您的预期运作。

答案 1 :(得分:0)

我已经解决了这个问题你可以查看js fiddle请告诉我你是否有任何问题。

link here -- http://jsfiddle.net/FHf9a/317/