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();
}

如何用随机对象元素填充<ul>？

1 个答案: