Question

我试图找到一种方法来计算输入数组的数据。

JavaScript

function getInput() 
{
    var even = [];
    var odd = [];
    var num = prompt("Enter your number");
    if (num % 2 === 0) {
        alert("Data entered into array.");
        even.push(num);
    }
    else if (num % 2 == 1) {
        alert("Data entered into array.");
        odd.push(num)
    }
    else {
        alert("Invalid input.");
    }
}
function finished() //This is where the calculations are done. It's accessed by a button in my HTML.
{
    var sum = document.getElementById("leftSumOutput").innerHTML = even[];
}

这是页面的结构。我试图使用表来存储输出。

HTML

<!DOCTYPE html>
<html>
    <head>
    <title>Sample Title</title>
    <script type="text/javascript" src="assignmentOne.js"></script>
    <link rel="stylesheet" type="text/css" href="assignmentOne.css">
    <link rel="icon" href="favicon.png" type="image/x-icon" />
</head>
<body>
    <div align=center>
        <h1>Welcome to Assignment One!</h1>
        <label for="input">Click for each time you would like to make an input ==></label>
        <button id="input" onclick="getInput()"><b>Click to input data</b></button><br><br>
        <button id="done" onclick="finished()">Click here when done</button>
        <!--<h1 id="even">Even</h1>
        <h1 id="odd">Odd</h1>
        <p id="left"></p>
        <p id="right"></p>
        <p id="leftResult"></p>
        <p id="rightResult"></p>-->
        <table>
            <tr>
                <th></th>
                <th>Even</th>
                <th>Odd</th>
            </tr>
            <tr>
                <td></td>
                <td id="even"></td>
                <td id="odd"></td>
            </tr>
            <tr colspan="2">
                <td>Sum</td>
                <td id="leftSumOutput"></td>
                <td id="rightSumOutput"></td>
            </tr>
            <tr colspan="2">
                <td>Average</td>
                <td id="leftAvgOutput"></td>
                <td id="rightAvgOutput"></td>
            </tr>
        </table>
        </div>
    </body>
</html>

我想计算数组中的项目。我是新手，所以我提前道歉。

编辑：我忘了提到我也不知道如何计算字段的平均值。任何帮助都将不胜感激。到目前为止，感谢大家的帮助！

Answer 1

我认为你对变量的范围有点困惑。这是一个如何完成它的例子：

(function(w, d) {
  
  var odds = [], evens = [], button, elSumOdds,elSumEvens, elAvgOdds, elAvgEvens, s

  w.addEventListener('load', function() {
    button = d.querySelector('button')
    elSumOdds = d.querySelector('#sum-odds')
    elSumEvens = d.querySelector('#sum-evens')      
    elAvgOdds = d.querySelector('#avg-odds')
    elAvgEvens = d.querySelector('#avg-evens')      
    button.addEventListener('click', calculate)    
  })
  
  function calculate() {
  
    var i = prompt('enter number') | 0;           

    if ((i|0)%2) {
       odds.push(i)
       s = odds.reduce(function(a,n) { return  a+n }, 0)
       elSumOdds.innerText = s
       elAvgOdds.innerText = s / odds.length
    } else {
       evens.push(i)
       s = evens.reduce(function(a,n) { return  a+n }, 0)  
       elSumEvens.innerText = s
       elAvgEvens.innerText = s / evens.length
    }       
  }

})(window, document)

<button > calculate</button>

<table>
  <tr><td></td><td>Sum</td><td>Avg</td></tr>
  <tr><td>Odds</td><td id='sum-odds'></td><td id='avg-odds'></td></tr>
  <tr><td>Evens</td><td id='sum-evens'></td><td id='avg-evens'></td></tr>

</table>

Answer 2

如果需要计算数组中每个元素的总和，则需要编写map函数。访问链接：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map

如果您只需要知道多少元素，请致电：alert(even.length);

Answer 3

注意：@vittore的结构激发了这种变化。

(function(d) {

  d.getElementById('input').addEventListener('click', getInput);
  d.getElementById('done').addEventListener('click', finished);

  var elSumOdd = d.getElementById('oddSumOutput');
  var elSumEven = d.getElementById('evenSumOutput');
  var elAvgOdd = d.getElementById('oddAvgOutput');
  var elAvgEven = d.getElementById('evenAvgOutput');

  var even = [];
  var odd = [];

  function getInput() {
    var num = prompt("Enter your number") | 0;
    if (num % 2 == 0) {
      even.push(num);
    } else if (num % 2 == 1) {
      odd.push(num);
    } else {
      alert("Invalid input.");
    }

    finished();
  }

  function finished() { //This is where the calculations are done. It's accessed by a button in my HTML.
    elSumOdd.innerHTML = odd.reduce(function(a, b) {
      return a + b;
    }, 0);

    elSumEven.innerHTML = even.reduce(function(a, b) {
      return a + b;
    }, 0);

    elAvgOdd.innerHTML = elSumOdd.innerHTML / odd.length || 0;
    elAvgEven.innerHTML = elSumEven.innerHTML / even.length || 0;
  }

})(document);

<div align=center>
  <h1>Welcome to Assignment One!</h1>
  <label for="input">Click for each time you would like to make an input ==></label>
  <button id="input"><b>Click to input data</b>
  </button>
  <br>
  <br>
  <button id="done">Click here when done</button>
  <!--<h1 id="even">Even</h1>
        <h1 id="odd">Odd</h1>
        <p id="left"></p>
        <p id="right"></p>
        <p id="leftResult"></p>
        <p id="rightResult"></p>-->
  <table>
    <tr>
      <th></th>
      <th>Even</th>
      <th>Odd</th>
    </tr>
    <tr>
      <td></td>
      <td id="even"></td>
      <td id="odd"></td>
    </tr>
    <tr colspan="2">
      <td>Sum</td>
      <td id="evenSumOutput"></td>
      <td id="oddSumOutput"></td>
    </tr>
    <tr colspan="2">
      <td>Average</td>
      <td id="evenAvgOutput"></td>
      <td id="oddAvgOutput"></td>
    </tr>
  </table>
</div>

计算输入到数组中的项目

3 个答案: