Javascript文本框的简单添加更新 [英] Javascript textbox update on simple addition

问题描述

我有四个编号为#a #b #c #d的texbox. 假设用户输入了上述三个框中的值，则其余文本框将显示在前面三个框中输入的值的总和.

I have four texboxes with ids #a #b #c #d. Suppose user enters the values for any three of the above boxes then the remaining textbox will show the sum of values entered in three boxes earlier.

例如: 如果用户输入#a #c& #d 其余的文本框，即#b将显示#a #b& #c

For Example: If user enters the values of #a #c & #d the remaining textbox i.e. #b will show the sum of #a #b & #c

如何在Javascript或jquery中实现呢? 我正在使用onkeyup()函数，但无法解决它.

How can we implement this in Javascript or jquery? I am using onkeyup() function but am not able to solve it.

尝试过的代码:

<input type="Number" id="a" onkeyup="check();" />
<input type="Number" id="b" onkeyup="check();"/>
<input type="Number" id="c" onkeyup="check();"/>
<input type="Number" id="d" onkeyup="check();"/>
    <script>
var a=Number($('#a').val());
var b=Number($('#b').val());
var c=Number($('#c').val());
var d=Number($('#d').val());
    Function check(){
    if (a!=null && b!=null && c!=null)
    {
        var sum1=a+b+c;
        Number($('#d').val(sum1));
    }
    else if (a!=null && b!=null && d!=null)
    {
        var sum2=a+b+d;
        Number($('#c').val(sum2));
    }
    else if (a!=null && c!=null && d!=null)
    {
        var sum3=a+c+d;
        Number($('#b').val(sum3));
    }
    else if (b!=null && c!=null && d!=null)
    {
        var sum4=b+c+d;
        Number($('#a').val(sum4));
    }
    }
    </script>

推荐答案

在代码中进行以下更改.

Make the following changes in your code.

1. 检查Function check()中大写的F.它必须是小写的f(即function check()).
2. 像这样检查null条件. if (a && b && c)
3. 放置用于获取更新的a，b，c和d值的单独方法，然后在check方法中调用该方法.

1. Check the uppercase F in Function check(). It needs to be in lowercase f (i.e) function check().
2. Check the null condition like this. if (a && b && c)
3. Put separate method for getting the updated a, b, c and d values and call that method in your check method.

代码段:

var a, b, c, d;

function values() {
  a = Number($('#a').val());
  b = Number($('#b').val());
  c = Number($('#c').val());
  d = Number($('#d').val());
}

function check() {
  values();
  if (a && b && c) {
    var sum1 = a + b + c;
    $('#d').val(sum1);
  } else if (a && b && d) {
    var sum2 = a + b + d;
    $('#c').val(sum2);
  } else if (a && c && d) {
    var sum3 = a + c + d;
    $('#b').val(sum3);
  } else if (b && c && d) {
    var sum4 = b + c + d;
    $('#a').val(sum4);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="Number" id="a" onkeyup="check();" />
<input type="Number" id="b" onkeyup="check();" />
<input type="Number" id="c" onkeyup="check();" />
<input type="Number" id="d" onkeyup="check();" />

这篇关于Javascript文本框的简单添加更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！