javascript - 如何从 getElementById 获取多个唯一结果？ JavaScript

Question

我正在尝试创建一个随机字符生成器，​​它可以一次创建多个不同的字符，但我很难让数据显示在多个 id= 标签上。例如，会为第一个 Angular 色的姓名生成数据，但不会为第二个 Angular 色的姓名生成数据。

是否可以显示同一数组中两者的唯一结果？

<span>Name:</span><span id="name"></span>

<span>Name:</span><span id="name"></span>

HTML

var name = ["vin","hau","kin"]

    var randomName = name[Math.floor(Math.random() * name.length)]

    console.log(randomName);

document.getElementById("name").innerHTML = randomName

JavaScript

Answer 1

你不；具有相同值的多个 ID 是 invalid markup 。

相反，您应该使用类，然后使用 .getElementsByClassName() 。这将返回 NodeList 元素集合，您可以对其进行循环。

此外，您的随机名称只会从数组中获取随机字母。这是因为 name 更改了 JavaScript 中的上下文，如 window.name 有特殊用途，应该是一个字符串。您需要更改为名称之类的内容。

您还需要在新循环内部设置此randomName，以确保真正的“随机性”。

所有这些都可以在以下内容中看到:

var names = ["vin", "hau", "kin"];
var elements = document.getElementsByClassName("name");
for (var i = 0; i < elements.length; i++) {
  var randomName = names[Math.floor(Math.random() * names.length)];
  elements[i].innerHTML = randomName;
}

<span>Name:</span><span class="name"></span>
<span>Name:</span><span class="name"></span>