javascript - 如何用随机对象元素填充 ？

Question

我正在尝试构建一个随机名称生成器应用程序，虽然我已经完成了如何获得“名字”和“姓氏”的随机组合的工作，但我面临的问题是每个列表项显示完全相同的名称，尽管名称本身 是随机的。请看下面的代码:

let nameList = document.getElementById("name-list"); // <ul> in HTML doc
let names = document.getElementsByClassName("name"); // <li> in HTML doc, 10 in total

function Generate() { // onclick function

     nameList.style.display = 'block';

     randomFirstM = nameObj["male"]["first"][Math.floor(Math.random() * 
Object.keys(nameObj["male"]["first"]).length)] //nameObj is from a different JS file which contains sub-Objects for male/female and first/last names

     randomLastM = nameObj["male"]["last"][Math.floor(Math.random() * 
Object.keys(nameObj["male"]["last"]).length )]
     for(let i = 0; i < names.length; i++) {
         names[i].innerHTML = randomFirstM + " " + randomLastM;
     }

 }

所以它会显示类似:

• 约翰·史蒂文森
• 约翰·史蒂文森
• 约翰·史蒂文森
• 约翰·史蒂文森
• 约翰·史蒂文森

代替:

• 约翰·史蒂文森
• 理查德约翰逊
• 乔治·亨利
• 迈克尔·泰勒
• 亚伦史蒂文斯

非常感谢任何意见和建议。

Answer 1

您需要在循环的每次迭代中生成一个随机的名字和姓氏 - 目前，您只是在最开始选择一个随机名称，然后使用相同的名称每次的名字。也许创建一个接受数组并返回一个函数的函数，该函数从数组中选择一个随机元素用于 DRY 代码。

另请注意，当可以使用点表示法时，点表示法优于括号表示法，除非您故意插入 HTML 标记，否则最好分配给 .textContent 而不是分配给 .innerHTML (更安全、更快捷、更可靠):

const makeRandom = arr => {
  const { length } = arr;
  return () => arr[Math.floor(Math.random() * length)];
};
const randomFirstM = makeRandom(nameObj.male.first);
const randomLastM = makeRandom(nameObj.male.last);
for(let i = 0; i < names.length; i++) {
  names[i].textContent = randomFirstM() + " " + randomLastM();
}