javascript - 使用参数对象将用户生成的值作为参数传递给函数时遇到问题

Question

使用文本框，我需要用户能够输入他们想要查找平均值的数字，每个数字之间用空格分隔。

这是文本框的 HTML:

<input type="text" id="average" onchange="findAverage()" />

我知道我需要使用参数对象来获取平均值。

从这里开始，我就迷失了方向。看起来也许我应该首先将文本框输入转换为数组，并按“”分割？我非常迷失，非常感谢对此的任何帮助!到目前为止我得到的功能如下:

function findAverage(nums) {
  nums = document.getElementById("average").value;
  nums = nums.split(" ");

  for (var i=0, total = 0, len=arguments.length; i<len; i++) {
    total += arguments[i]; 
  } 
  document.getElementById("averageReturn").innerHTML = total / arguments.length;   
}

我一直在阅读有关使用参数对象的所有内容，但我真的不理解它。

(如果有人能想到更好的方法来问这个问题，请随时编辑这个问题，以便其他用户更好/更清楚地了解它!)

Answer 1

您的解决方案并不遥远，但使用 onchange HTML 属性却让您的生活变得困难。 arguments 局部变量和 nums 参数与您的情况没有任何相关性。

我会使用 addEventListener 方法。这既更容易阅读，也使得在输入值发生更改时获取输入值变得微不足道。像这样的东西(Plunker):

function findAverage() {
  // grab the value, split on whitespace, parse into numbers
  var nums = this.value.split(' ').map(parseFloat);

  // compute total
  for (var i = 0, total = 0, len = nums.length; i < len; i++) {
    total += nums[i];
  }

  // compute average and write to output element
  document.getElementById("averageReturn").innerHTML = total / len;
}

// add change listener
document
  .getElementById('average')
  .addEventListener('change', findAverage, false);

请注意，当使用 addEventListener 绑定(bind) findAverage 时，在函数内部，this 引用目标元素，而 this. value 保存该元素的当前值。