javascript - 如何计算网格中随机数的平均值？

Question

我有一个随机网格生成器，它会询问您想要多大的网格。如果您输入 5，它将生成一个包含随机数的 5x5 网格，或者一个包含随机数的 10x10 网格等。

我现在需要在生成网格后获取这些随机数并显示随机数的平均值。我似乎无法让这部分工作，因为每次生成新网格时都有不同的数字。

var button = document.getElementById('gridSize');

button.onclick = function(e) {
  result = document.getElementById('wrapper');
  num = parseInt(document.getElementById('grid').value);
  var str = "<table border='2'>";

  for (row = 0; row < num; row++) {
    str += "<tr>";
    for (col = 0; col < num; col++) {
      var randNumber = Math.floor(Math.random() * 100) + 1;
      if (randNumber % 3 === 0) {
        str += '<td style="background: red;">';
      } 
      else if (randNumber % 2 === 0 && !randNumber % 3 === 0) {
        str += '<td style="background: blue;">';
      } 
      else {
          str += "<td>";
      }

      str += randNumber + "</td>";
    }
    str += "</tr>";
  }
  str = str + "</table>";
  result.innerHTML = str;    
}

<form name="tablegen">
  <input type="text" name="grid" id="grid"/>
  <input name="generate" id="gridSize" type="button" value="Generate Grid!" onclick='createTable();'/>
</form>

<div id="wrapper"></div>

这是我的代码，我似乎无法弄清楚如何去做。

Answer 1

这里有一个简单的方法，就是把你计算出来的randNumber累加起来，然后除以单元格的总数。

var button = document.getElementById('gridSize');

button.onclick = function(e) {
  result = document.getElementById('wrapper');
  num = parseInt(document.getElementById('grid').value);
  var avg = 0;
  var str = "<table border='2'>";

  for (row = 0; row < num; row++) {
    str += "<tr>";
    for (col = 0; col < num; col++) {
      var randNumber = Math.floor(Math.random() * 100) + 1;
      avg += randNumber;
      if (randNumber % 3 === 0) {
        str += '<td style="background: red;">';
      } 
      else if (randNumber % 2 === 0 && !randNumber % 3 === 0) {
        str += '<td style="background: blue;">';
      } 
      else {
          str += "<td>";
      }

      str += randNumber + "</td>";
    }
    str += "</tr>";
  }
  avg /= num*num;
  str = str + "</table>" + "<span>Average is " + avg + "</span>";
  result.innerHTML = str;    
}

<form name="tablegen">
  <input type="text" name="grid" id="grid"/>
  <input name="generate" id="gridSize" type="button" value="Generate Grid!" onclick='createTable();'/>
</form>

<div id="wrapper"></div>