Javascript 将循环结果用作类名

我想学习JavaScript，但在一些代码上遇到了麻烦

我制作了一个数组，在一个具有固定id的div中显示结果，但我希望类名是数组结果的名称

fruits = ["Banana", "Orange", "Apple", "Mango"];
for (i = 0; i < fruits.length; i++) {
document.write("<div id=fruit>" + fruits[i] + "</div>") ;  
document.getElementById("fruit").className = fruits[i];
}

水果=[“香蕉”、“橘子”、“苹果”、“芒果”]；
对于（i=0；i

这就是我得到的结果

<div id="fruit" class="Mango">Banana</div>
<div id="fruit">Orange</div>
<div id="fruit">Apple</div>
<div id="fruit">Mango</div>

香蕉 橙色 苹果 芒果 只有第一个div得到一个类，但arry结果错误

我找了好几个小时都没找到。

---

如果有人能告诉我我做错了什么，那就太好了。

这是因为在

document.getElementById（“fruit”）.className=fruits[i]您按id选择了一个元素，它只返回1个元素，“第一次出现”，因为您希望每个元素使用唯一的id

您可以简单地执行以下操作：


水果=[“香蕉”、“橘子”、“苹果”、“芒果”]；
对于（i=0；i}
id的一般思想是它标识文档中的单个元素。在您的例子中，divs共享id，因此
getElementById
实现了最后一个，解决方案是使每个元素的每个id都是唯一的，例如fruit-0、fruit-1。。。根据迭代的当前索引

正如您将看到的，Javascript是一种非常通用的编程语言，例如，
for..of
允许您以一种更简单的方式迭代数组或类似数组的元素，许多程序员使用这种方法，因为它非常友好，而且事实上我们写得更少


constfruits=[“香蕉”、“橘子”、“苹果”、“芒果”]；
for（const[index，fruit]of fruits.entries（））{
常量元素=`${fruit}`；
控制台日志（元素）；
}
id
属性用于指定唯一的id。请勿多次放置同一id。由于
id
要指定唯一的id，
document.getElementById
返回第一个找到的项。这就是你得到结果的原因。你的代码一次又一次地重写了第一个元素的类名，是的，谢谢，这很好，我在id和类标记中使用了水果[1]，但我需要向它添加+，现在我明白了。为什么-fruits不能在div id的“”之外？对不起，我编辑了代码，这样会更合理。所以，若您注意到，id名称和类名在单引号
“
中，我使用了它们，这样它就不会和双引号
冲突“
我曾将字符串表达式括起来。希望这有道理。嘿，太棒了，现在我明白了。谢谢你的帮助。没问题，如果你能接受答案，它会帮助其他类似的问题。泰