时间戳

首页 > 解决方案 > 如何填充

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

问题描述

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

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

 }

所以它会显示如下内容：

代替：

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

标签： javascripthtmlcss

解决方案

您需要在循环的每次迭代中生成一个随机的名字和姓氏- 目前，您只是在开始时选择一个随机名称，然后每次都使用相同的名称。也许制作一个函数，该函数接受一个数组并返回一个函数，该函数从数组中选择一个随机元素用于 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();
}

推荐阅读