让这个javascript随机字生成器在同一文档中的多个div上工作，这些div来自同一个数组onclick事件

Question

这不是一个重复的问题，我花了3天时间在这里搜索，没有其他类似的问题！

这个javascript只在从一个div调用时生成随机单词，或者在尝试不同的DOM方法获取元素时生成第一个div。

我已经尝试了几个选项和getElementsBy-ID、Tag、Name、Class和CSS Selector的组合。

然而，经过几天的搜索和测试，我无法使它在多个分区中工作

我需要使用相同的数组作为我所有36个div的唯一源，以便从每个div上的onClick事件中生成随机单词

我愿意编辑它，或者完全更改它。

这就是我目前使用getElementsByClassName为第一个div所做的工作，我认为这应该是正确的方式，因为我需要从几个元素调用这个脚本，而不仅仅是一个：

<div class="myFruits">First Fruit</div>
<div class="myFruits">Second Fruit</div>
<div class="myFruits">Third Fruit</div>

<script>
const fruit = document.getElementsByClassName("myFruits")[0];
const randomFruits = ["Apple","Avocado","Banana","Blueberry","Cherry","Coconut",
"Fig","Grapes","Kiwi","Lemon","Mango","Orange","Papaya","Pineapple","Raspberry",
"Strawberry","Tangerine","Watermelon"]
fruit.onclick = function() {
var randomNum = Math.floor(Math.random() * (randomFruits.length))
this.innerText = randomFruits[randomNum]
}
</script>

我尝试过使用：

document.getElementById("element_id")

document.getElementsByClassName("css_class_name")

document.querySelector("div.className")

document.querySelectorAll("div.classNameOne, div.classNameTwo");

document.getElementsByTagName("div")

document.getElementsByTagName("div")[0].getAttribute("class");

还尝试为那些返回实时HTMLCollection的方法使用[0]之类的索引器，但到目前为止都不起作用。

当然，我不是一个专家，所以我从来没有设法使它发挥作用。我已经耗尽了自己成功的机会，现在我求助于你的善意帮助和智慧。

我们非常欢迎所有的帮助。提前谢谢。

Answer 1

您可以创建一个循环，将点击处理程序添加到所有水果

const allfruits = document.getElementsByClassName("myFruits");
for(let fruit of allfruits) {
fruit.onclick = function() {
var randomNum = Math.floor(Math.random() * (randomFruits.length))
this.innerText = randomFruits[randomNum]
} 
}

Answer 2

正如@pilchard所说，

您只将onclick分配给您的getElementsByClassName((调用。您需要迭代返回集合，并为所有集合分配一个侦听器。

您需要做的是包含父数组中的所有元素，然后使用[parentarray].children作为子元素数组循环遍历该父数组的元素。您可以将相同的onclick函数分配给该数组中的每个元素。

正如@Kokodoko所说，由于你希望处理程序处理的所有元素都有相同的类名，你也可以跳过父元素，只需使用var fruitDivs = document.getElementsByClassName("myFruits");来循环创建一个实时的元素HTMLCollection。

const fruit = document.getElementsByClassName("myFruits")[0];
const randomFruits = ["Apple","Avocado","Banana","Blueberry","Cherry","Coconut",
"Fig","Grapes","Kiwi","Lemon","Mango","Orange","Papaya","Pineapple","Raspberry",
"Strawberry","Tangerine","Watermelon"]
function randomFruit() {
var randomNum = Math.floor(Math.random() * (randomFruits.length))
this.innerText = randomFruits[randomNum]
}
var fruitDivs = document.getElementById("fruitDiv").children;
for(var i=0; i<fruitDivs.length;i++){
fruitDivs[i].onclick=randomFruit;
}

<div id="fruitDiv">
<div class="myFruits">First Fruit</div>
<div class="myFruits">Second Fruit</div>
<div class="myFruits">Third Fruit</div>
</div>