如何在 for 循环中运行自定义随机函数

Question

我正在尝试打印 10 个随机名称，但循环并未生成它们 - 仅出现一个名称。我不知道在for 循环中正确调用我的Randomizer 函数。到目前为止，我已经尝试过：

<center>
<b>
<input type="button" value="Generate database" onclick="Randomizer();">
<b>

<table>
<tr id="labels"><td>First Name</td><td>Last Name</td></tr>
<tr id="fname"></tr></table>
</center>

<script>
var firstnames = ["Hook", "Rumpelstiltskin", "Belle", "Emma", "Regina", "Aurora", "Elsa", "Anna", "Snow White", "Prince Charming", "Cora", "Zelena", "August", "Mulan", "Graham", "Discord", "Will", "Robin Hood", "Jiminy Cricket", "Henry", "Neal", "Red"];
var lastnames = ["Adams","Bowden","Conway","Darden","Edwards","Flynn","Gilliam","Holiday","Ingram","Johnson","Kraemer","Hunter","McDonald","Nichols","Pierce","Sawyer","Saunders","Schmidt","Schroeder","Smith","Douglas","Ward","Watson","Williams","Winters"];
var count = 10;

function Randomizer() {
    nameone = firstnames[Math.floor(Math.random() * firstnames.length)];
    nametwo = lastnames[Math.floor(Math.random() * lastnames.length)];
    message = "<td>" + nameone + "</td><td>" + nametwo + "</td>";
    document.getElementById("fname").innerHTML = message;
}

for (var i = 1; i < count; i++) {
Randomizer();
}

</script>

Answer 1

我创建了一个解决方案，该解决方案将在单击按钮时清除之前的运行。另外，我将循环放在函数中，这样它就不会在页面加载时执行，而是在点击时执行。

var firstnames = ["Hook", "Rumpelstiltskin", "Belle", "Emma", "Regina", "Aurora", "Elsa", "Anna", "Snow White", "Prince Charming", "Cora", "Zelena", "August", "Mulan", "Graham", "Discord", "Will", "Robin Hood", "Jiminy Cricket", "Henry", "Neal", "Red"];
var lastnames = ["Adams", "Bowden", "Conway", "Darden", "Edwards", "Flynn", "Gilliam", "Holiday", "Ingram", "Johnson", "Kraemer", "Hunter", "McDonald", "Nichols", "Pierce", "Sawyer", "Saunders", "Schmidt", "Schroeder", "Smith", "Douglas", "Ward", "Watson", "Williams", "Winters"];
var count = 10;

function createRowFromHTML(htmlString) {
  var table = document.createElement('tbody');
  table.innerHTML = htmlString.trim();

  return table.firstChild;
}

function Randomizer() {
	// clear old names
  document.getElementsByTagName("tbody")[0].innerHTML = "";

  for (var i = 1; i < count; i++) {
    nameone = firstnames[Math.floor(Math.random() * firstnames.length)];
    nametwo = lastnames[Math.floor(Math.random() * lastnames.length)];
    message = "<tr><td>" + nameone + "</td><td>" + nametwo + "</td></tr>";
    var row = window.createRowFromHTML(message)
    document.getElementsByTagName("tbody")[0].appendChild(row);
  }
}

<center>
  <input type="button" value="Generate database" onclick="Randomizer();">

  <table id="names">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
</center>

Answer 2

每次循环迭代时，此行都会覆盖 tr 元素 (<tr id="fname">) 中的所有内容：

document.getElementById("fname").innerHTML = message;

您正在生成多个名称；除了最后一个之外，你只是消灭了所有。

您需要为每个名称添加一个新行。