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

＆＃13;

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;

＆＃13;

<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>

＆＃13;

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>

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

2 个答案: