无需填写所有字段且无需按钮即可获取平均值答案

【问题标题】：Get average value without filling all fields and without button无需填写所有字段且无需按钮即可获取平均值
【发布时间】：2019-02-09 11:00:56
【问题描述】：

所以我有 3 个输入框，我想用它来从只读输入框中的这些框取平均值，而无需单击任何按钮（只需更改值）。

这里是html：

input1: <input name="1" id="1" value="" ><br>
input2: <input name="2" id="2" value="" ><br>
input3: <input name="3" id="3" value="" ><br><br>
output: <input name="output" id="4" value="" readonly>

这是脚本：

var input = $('[name="1"],[name="2"],[name="3"]'),
    input1 = $('[name="1"]'),
    input2 = $('[name="2"]'),
    input3 = $('[name="3"]'),
	input4 = $('[name="output"]');
input.change(function () {
    var val1 = (isNaN(parseInt(input1.val()))) ? 0 : parseInt(input1.val());
    var val2 = (isNaN(parseInt(input2.val()))) ? 0 : parseInt(input2.val());
    var val3 = (isNaN(parseInt(input3.val()))) ? 0 : parseInt(input3.val());
    input4.val((val1 + val2 + val3)/3);
});

但是，我希望在不填充所有 3 个输入框的情况下获得平均值，并且分隔符基于我输入的文本框数量。就像我在 textbox1 和 textbox2 中输入值一样，输出将是 (textbox1+textbox2)/2 而不是 (textbox1+textbox2+0)/3。

我很确定问题出在“input4.val((val1 + val2 + val3)/3);”中线。但我不知道如何编写正确的代码

【问题讨论】：

检查我的答案，因为您接受的答案有一些问题（请参阅我的评论）。
你把我弄糊涂了，先生。你和先生是同一个人吗？马蒙？
没有。我不是。我刚刚发布了一个单独的答案。

标签： javascript jquery html

【解决方案1】：

您可以使用 input 事件来代替更改。您可以使用filter() 和map() 来获取非空输入数组。然后用reduce()求和，最后除以数组的长度得到结果。

尝试以下方法：

var input = $('[name="1"],[name="2"],[name="3"]'),
    input1 = $('[name="1"]'),
    input2 = $('[name="2"]'),
    input3 = $('[name="3"]'),
    input4 = $('[name="output"]');
input.on('input', function (el) {
    var vArray = input.filter(function(i,el){
      return !isNaN(this.value.trim()) && $(el).val().trim() != "";
    }).map((j,k) => Number(k.value)).get();
    var res = '';
    if(vArray.length > 0)
      res = vArray.reduce((a,c) => a+c,0)/vArray.length;
    input4.val(res);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
input1: <input name="1" id="1" value=""><br>
input2: <input name="2" id="2" value="" ><br>
input3: <input name="3" id="3" value="" ><br><br>
output: <input name="output" id="4" value="" readonly>:

【讨论】：

当只填充 input1 时，平均值应该是 4 而不是 1.333
4?为什么应该是 4？
@AshayMandwarya 是的。它应该是 4 而不是 1.333。
@amuntazar，MrUpsidown 指出的异常已在更新的答案中得到解决......
谢谢您，先生。但是我已经将它修改为我的实际作业并提交给我的讲师。到目前为止，他还没有说什么。虽然我会更新它以供我个人学习。 :) 再次感谢您，先生。

【解决方案2】：

jQuery 版本

$('input.input').on('blur', function() {

  let values = [];

  $('input.input').each(function() {

    let value = $(this).val();

    if (value && !isNaN(value) && !(/^ *$/.test(value))) {

      values.push(Number($(this).val()));
    }
  });

  if (values.length) {

    $('input.output').val(values.reduce(function(a, b) {
      return a + b;
    }) / values.length);

  } else {

    $('input.output').val('');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inputs">
  input1: <input class="input" name="1" id="1" value=""><br> input2: <input class="input" name="2" id="2" value=""><br> input3: <input class="input" name="3" id="3" value=""><br><br>
</div>

output: <input class="output" name="output" id="4" value="" readonly>

【讨论】：