如何将此JavaScript用于HTML中的多个ID

Question

我在网上找到了这个脚本：https://sebhastian.com/javascript-multiply-string/

let multi = 2;
let str = "Little lamb";
let multiStr = "";
while(multi > 0){
multiStr += str
multiStr += " ";
multi--;
}
multiStr = multiStr.trimEnd();
console.log(multiStr); // "Little lamb Little lamb"
document.getElementById("frameText").innerHTML = multiStr;

并且想要询问如何在具有ID"0"的多个HTML标签上使用它；frameText"；。它们应该都有相同的文本字符串。我想它是用for循环做的。我是JavaScript的初学者。

Answer 1

您不能重用id，因为它是无效的HTML，JavaScript只能识别具有特定id的第一个元素。要选择多个元素，您应该为它们分配一个公共类名，然后使用document.querySelectorAll(".the_class")查找它们，使用.forEach()迭代结果集。

let multi = 2;
let str = "Little lamb";
let multiStr = "";
while (multi > 0) {
multiStr += str
multiStr += " ";
multi--;
}
multiStr = multiStr.trimEnd();
console.log(multiStr); // "Little lamb Little lamb"
document.querySelectorAll(".frameText").forEach(ft => ft.innerHTML = multiStr);

<div class="frameText"></div>
<div class="frameText"></div>
<div style="padding: 2em;">
<span class="frameText"></span>
</div>

Answer 2

let multi = 2;
let str = "Little lamb";
let arr = [];
for (var i = 0; i < multi; i++) {
arr.push('<div class="frameText">' + str + '</div>')
}
document.getElementById("container").innerHTML = arr.join("n");

<div id="container"></div>