Как запустить произвольную функцию в цикле for

Question

Я пытаюсь напечатать 10 случайных имен, но цикл не генерирует их - появляется только одно имя. Я не знаю, как правильно вызывать мою Randomizer функцию в цикле for. Пока я пробовал это:

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

Вы генерируете более одного имени; Вы просто уничтожаете все, кроме последнего.

Что вам нужно сделать, это добавить новую строку для каждого имени.