如何在for循环中正确调用自定义Randomizer函数？生成10个随机名失败

我帮你分析了问题所在：大概率是你的Randomizer函数每次生成姓名时都替换了表格里的现有内容，而不是追加新的行；另外可能循环调用的逻辑也没处理到位，导致只执行了一次生成操作。

下面是修复后的完整代码，以及关键修改点的说明：

完整代码 #

HTML部分 #

<center>
  <button onclick="Randomizer();">Generate database</button>
  <table id="nameTable">
    <tr id="labels">
      <td>First Name</td>
      <td>Last Name</td>
    </tr>
  </table>
</center>

JavaScript部分 #

// 定义随机姓名的数据源，你可以根据需要修改
const firstNames = ["John", "Jane", "Mike", "Emily", "David", "Sarah", "Chris", "Lisa", "Adam", "Olivia"];
const lastNames = ["Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller", "Davis", "Rodriguez", "Martinez"];

// 专门负责生成单个随机姓名的函数
function generateRandomName() {
  const randomFirstName = firstNames[Math.floor(Math.random() * firstNames.length)];
  const randomLastName = lastNames[Math.floor(Math.random() * lastNames.length)];
  return { firstName: randomFirstName, lastName: randomLastName };
}

// 主函数：循环生成10个姓名并渲染到表格
function Randomizer() {
  const table = document.getElementById("nameTable");
  
  // 先清空之前生成的姓名行（保留表头）
  const existingRows = table.querySelectorAll("tr:not(#labels)");
  existingRows.forEach(row => row.remove());

  // 循环10次，每次生成一个姓名并添加到表格
  for (let i = 0; i < 10; i++) {
    const { firstName, lastName } = generateRandomName();
    
    // 动态创建新的表格行和单元格
    const newRow = document.createElement("tr");
    const firstNameCell = document.createElement("td");
    firstNameCell.textContent = firstName;
    const lastNameCell = document.createElement("td");
    lastNameCell.textContent = lastName;
    
    // 把单元格添加到行，再把行追加到表格末尾
    newRow.appendChild(firstNameCell);
    newRow.appendChild(lastNameCell);
    table.appendChild(newRow);
  }
}

关键修改说明 #

• 拆分函数职责：把生成单个姓名的逻辑抽成独立的generateRandomName函数，让Randomizer专注于循环和表格渲染，代码更清晰易维护
• 清空旧内容：每次点击按钮时先删除之前的姓名行，避免重复生成的内容堆积
• 动态追加元素：不再复用同一个<tr>，而是每次循环都创建新的行和单元格，追加到表格末尾，这样10个姓名都会显示出来
• 正确的循环逻辑：用for (let i = 0; i < 10; i++)确保循环执行10次，每次生成一个新姓名

内容的提问来源于stack exchange，提问作者External