输入到文本字段的一系列数字的总和和平均值答案

【问题标题】：Sum and Average of a series of numbers inputed to a text field输入到文本字段的一系列数字的总和和平均值
【发布时间】：2018-02-16 05:22:50
【问题描述】：

我正在尝试创建一个应用程序来计算输入到由空格分隔的文本字段中的数字的总和和平均值。

我被困在你必须放入一个循环来计算间隔输入的总和和平均值的部分。在我输入代码的过程中，我一直在使用 console.log 进行测试。

任何指导都会有所帮助。第一次做javascript。我查看了这个网站上的表格，似乎所有的 sum/avg javascript 问题都不是基于输入文本的。这就是为什么我要创建一个新问题。

HTML 和 Javascript 在下面

<body>
<input type="text" id="numberSeries" />
<button id="calculateSumAverage" onclick="calculateSumAverage();">Calculate</button>
<div id="calculationOutput"></div>
</body>

Javascript

function calculateSumAverage() {

    //grab the input
    var numberSeries = document.getElementById("numberSeries").value;
    //split it using.split(" ")
    var arr = numberSeries.split("  ");

    //set sum var to 0
    var sum = 0;

    //set avg var to 0
    var avg = 0;

    //loop input array and sum
    for (var i=0; i<arr.length; i++){
        sum += arr[i];
    }
    console.log(sum);

    //divded by
    //calculate avg divided by myarray.length

    //output to div
}

【问题讨论】：

标签： javascript arrays loops sum average

【解决方案1】：

// Here is your function:
/*function calculateSumAverage() {
    //grab the input
    var numberSeries = document.getElementById("numberSeries").value;
    //split it using.split(" ")
    var arr = numberSeries.split("  ");
    //set sum var to 0
    var sum = 0;
    //set avg var to 0
    var avg = 0;
    //loop input array and sum
    for (var i=0; i<arr.length; i++){
        sum += arr[i];
    }
    console.log(sum);
    //divded by
    //calculate avg divided by myarray.length
    //output to div
}*/

// Here is a way to do it functionally:

function calculateSumAverage() {
  // This is the string that contains the numbers separated by a space.
  var inputValue = document.getElementById('numberSeries').value;
  
  var values = inputValue.split(' ')
    .map((val) => parseInt(val))
    .filter((val) => !isNaN(val));
    
  var sum = values.reduce((currentVal, nextVal) => currentVal + nextVal, 0);
  
  document.getElementById('calculationOutput').innerHTML = `Average: ${sum / values.length}`;
}

<body>
  <input type="text" id="numberSeries" />
  <button id="calculateSumAverage" onclick="calculateSumAverage();">Calculate</button>
  <div id="calculationOutput"></div>
</body>

【讨论】：

但是所有这些副作用都没有包含在 IO Monad 中：see-no-evil:
@MartinSeeler => 我发现了 Haskell 程序员。但另一方面，至少我正在尝试以实用的方式处理事情。在回答这些问题时，我想念 Lodash。 :(
我看到了你的努力，这就是为什么我赞成你的回答:-) 我知道你在说什么。 ramda 也很不错。
@MartinSeeler => 同意。我一直在来回讨论我更喜欢哪一个，但这一切似乎都取决于具体情况。我宁愿看到函数式编程接管 JavaScript 世界，而不是我们似乎看到的 OO 编程的涌入，但这只是我的 2c。
@th3n3wguy 谢谢你的方法。很高兴有另一种答案。我的问题是什么是 .map((val)?

【解决方案2】：

你的代码很好，除了sum += parseInt(arr[i]);你需要将每个字符串输入解析为整数

【讨论】：

是的，在我发布它之后，我阅读了更多关于解析的内容。我非常感谢您的反馈。

【解决方案3】：

input type="text" 将给出一个字符串。也可以拆分此字符串，使用 var arr = numberSeries.split(""); ，注意引号之间没有空格。要将每个字符串转换为数字，请使用一元运算符。

sum += +arr[i]; arr[i] 之前的plus(+) 符号会将字符串转换为数字。除非您转换为数字，否则字符串连接将产生这样的0123...

function calculateSumAverage() {

  //grab the input
  var numberSeries = document.getElementById("numberSeries").value;
  //split it using.split(" ")
  var arr = numberSeries.split("");

  //set sum var to 0
  var sum = 0;

  //set avg var to 0
  var avg = 0;
  console.log(arr)
  //loop input array and sum
  for (var i = 0; i < arr.length; i++) {
    sum += +arr[i];
  }
  console.log(sum);
}

<input type="text" id="numberSeries" />
<button id="calculateSumAverage" onclick="calculateSumAverage();">Calculate</button>
<div id="calculationOutput"></div>

【讨论】：

谢谢。是的，在阅读了您的代码后，我看到 .split("") 没有间隔，我将它隔开并将数字相加。我不知道加号（+）会将字符串转换为有用的数字。

【解决方案4】：

这样试试

function calculateSumAverage() 
{
	var numberSeries = document.getElementById("numberSeries").value;
	var arr = numberSeries.split("");
	var sum = 0;
	var avg = 0;
	for (var i = 0; i < arr.length; i++) 
	{
		sum += parseInt(arr[i]);
	}
}

【讨论】：