Question

我有this JavaScript，它计算4个给定数字的总和和平均值。

我希望它再做两件事：

使其也计算并显示这些数字的中位数
我不希望它为4个数字使用4个输入字段，而是使用单个字段，我们可以添加任意数量的数字（最少2个），用逗号分隔。

我发现了一些与此问题相关的其他问题，但没有使用JavaScript实现。

function doSums(what) {
    var df = document.forms[0];
    var a = parseFloat(df[0].value);
    var b = parseFloat(df[1].value);
    var c = parseFloat(df[2].value);
    var d = parseFloat(df[3].value);
    if ((isNaN(a)) || (isNaN(b)) || (isNaN(c)) || (isNaN(d))) {
        alert("four numbers please !");
        df.reset();
        df[0].focus();
        return;
    }
    if (what == "total") {
        df[5].value = a + b + c + d;
    } else {
        df[7].value = (a + b + c + d) / 4;
    }
}

JSFiddle

Answer 1

使用单个输入执行此操作：

split 逗号上的输入值。这将返回一组数字。
使用 for loop 来遍历数组，跟踪运行总计。
平均值将是总计除以数组的长度。

计算中位数：

以数字方式对数组进行排序。
如果有奇数个值，请使用中间值。否则，平均两个中间的。

此代码段执行上述操作，此外还包括错误检查。请注意，我将操作数乘以1以将它们转换为数字，而不是使用parseFloat。此外，我的floor和ceil逻辑会自动处理具有奇数或偶数操作数的个案。

＆＃13;

document.querySelector('#equation').addEventListener('change',function() {
  var ops= this.value
             .split(',')
             .sort(function(a,b){return a-b}),
      len= ops.length,
      valid= true,
      total = 0,
      i,
      error= document.querySelector('#error'),
      stotal= document.querySelector('#total'),
      smean= document.querySelector('#mean'),
      smedian= document.querySelector('#median');
  
  if(len < 2) valid= false;
  else {
    for(i = 0 ; i < len ; i++) {
      if(isNaN(ops[i])) valid= false;
      else total+= ops[i]*1;
    }
  }
  if(!valid) {
    error.style.display= 'block';
    stotal.innerHTML= smean.innerHTML= smedian.innerHTML= '';
  }
  else {
    error.style.display= 'none';
    stotal.innerHTML= total;
    smean.innerHTML= total/len;
    smedian.innerHTML= 
      (ops[Math.floor((len-1)/2)]*1 + ops[Math.ceil((len-1)/2)]*1)/2;
  }
});

＆＃13;

body {
  font: 14px verdana;
}

#error {
  color: red;
  display: none;
}

＆＃13;

Enter at least two numbers, separated by commas:<br>
<input id="equation" type="text">
<div id="error">Invalid input</div>
<div>Total: <span id="total"></span></div>
<div>Mean: <span id="mean"></span></div>
<div>Median: <span id="median"></span></div>

＆＃13;

Answer 2

您不应该将函数设为onLoad事件，而只是将其包含在<head>

内的

<script> function doSum(what){
           ...
}
</script>

标记中

JsFiddle

Javascript中值计算器

2 个答案: