如果用户不填写TextField 3，JavaScript不会生成准确的结果？

Question

我想创建一个Max ， Min ， Avg ， Sum的函数，但问题是当用户在所有文本字段中输入数字时，它会给出准确的结果。 但是，当TextField 3为空时，不会给出准确的结果。 我尝试处理此事，但没有任何反应。

function maxer() {

  var max = 0,
    min = 0,
    sum = 0,
    avg, power = "<p>MAX:";
  var arrayName = [3];
  arrayName[0] = document.getElementById('number1').value;
  arrayName[1] = document.getElementById('number2').value;
  arrayName[2] = document.getElementById('number3').value;

  if (arrayName[2] == "") {
    arrayName[2] = 0;
  }

  var f = Math.max(arrayName[0], arrayName[1], arrayName[2]);
  max = f;

  var g = Math.min(arrayName[0], arrayName[1], arrayName[2]);
  min = g;


  for (var i = 0; i < arrayName.length; sum = sum + parseInt(arrayName[i]), avg = sum / arrayName.length,
    i++);

  power += max + "</p>" + "<br/>";
  power += "<p>Min:";
  power += min + "</p>" + "<br/>";
  power += "<p>SUM:";
  power += sum + "</p>" + "<br/>";
  power += "<p>AVERAGE:";
  power += avg + "</p>" + "<br/>";
  document.getElementById('mmsa').innerHTML = power;
}

Enter Number 1: <input id="number1" type="text" name="number1" placeholder="Enter Number 1" />
Enter Number 2: <input id="number2" type="text" name="number2" placeholder="Enter Number 2" />
Enter Number 3: <input id="number3" type="text" name="number3" placeholder="Enter Number 3" />
<button type="button" onClick="maxer()">Click This To Operate</button>
<p id="mmsa"></p>

Answer 1

 function maxer() { var numbers = [].map.call( // Get strings from the inputs document.querySelectorAll('.number'), function(el) { return el.value; } ).filter(function(str) { // Filter out empty strings return str; }).map(Number); // Convert to numbers var max = Math.max.apply(void 0, numbers), min = Math.min.apply(void 0, numbers), sum = numbers.reduce(function(a,b) { return a + b; }), avg = sum / numbers.length; document.getElementById('mmsa').innerHTML = "<p>Max: " + max + "</p>" +"<p>Min: " + min + "</p>" +"<p>Sum: " + sum + "</p>" +"<p>Average: " + avg + "</p>"; } document.querySelector('button').onclick = maxer; 

 <p>Enter Number 1: <input class="number" type="text" /></p> <p>Enter Number 2: <input class="number" type="text" /></p> <p>Enter Number 3: <input class="number" type="text" /></p> <button type="button">Click This To Operate</button> <div id="mmsa"></div> 

Answer 2

简而言之，您只需要处理包含值的数组元素。 理想情况下，您的数组应该只大一些，因为它需要保存有效的输入值。 Oriol的解决方案以一种非常干净和紧凑的方式实现了这一目标，但是如果您不熟悉Javascript，可能很难理解。 如果您想要更接近原始解决方案的方法，那么可以使用一种（稍微不太干净）的替代方法，该替代方法会尽可能多地使用原始代码：

 function maxer() { var max = 0, min = 0, sum = 0, avg, power = "<p>MAX:"; var arrayName = []; for(var i=1;i<=3;i++) { if(document.getElementById('number' + i).value.trim().length > 0) { arrayName[arrayName.length] = parseInt(document.getElementById('number' + i).value); } } if(arrayName.length > 0) { max = arrayName[0]; min = arrayName[0]; sum = arrayName[0]; for (var j = 1; j < arrayName.length; j++) { max = Math.max(max, arrayName[j]); min = Math.min(min, arrayName[j]); sum += arrayName[j]; } var avg = sum / arrayName.length; power += max + "</p>" + "<br/>"; power += "<p>Min:"; power += min + "</p>" + "<br/>"; power += "<p>SUM:"; power += sum + "</p>" + "<br/>"; power += "<p>AVERAGE:"; power += avg + "</p>" + "<br/>"; document.getElementById('mmsa').innerHTML = power; } } 

 Enter Number 1: <input id="number1" type="text" name="number1" placeholder="Enter Number 1" /> Enter Number 2: <input id="number2" type="text" name="number2" placeholder="Enter Number 2" /> Enter Number 3: <input id="number3" type="text" name="number3" placeholder="Enter Number 3" /> <button type="button" onClick="maxer()">Click This To Operate</button> <p id="mmsa"></p>