javascript - 对函数的循环输出使用 eventlistner click 值

Question

这是我到目前为止的代码，但这一切都使第一个气球变化和 id 像每个 div id 单击以将输出提供给单击的 div。不确定我是否可以将它组合成一个简单的函数，或者我应该为每个 div 分别创建 1 个函数。

document.getElementById("baloon1").addEventListener("click", eggBasket);
document.getElementById("baloon2").addEventListener("click", eggBasket);
document.getElementById("baloon3").addEventListener("click", eggBasket);
function eggBasket(){
    var dispImages = new Array ();
    dispImages[1] = "images/1.png";
    dispImages[2] = "images/2.png";
    dispImages[3] = "images/3.png";
    dispImages[4] = "images/4.png";
    var rnd = Math.floor( Math.random() * dispImages.length );
        if( rnd == 0 ) {
        rnd =1;
        }
            if (document.getElementById("baloon1")){
                document.getElementById("baloon1").innerHTML = "<img src='" + dispImages[rnd] + "'/>";
            }
            else if (document.getElementById("baloon2")){
                document.getElementById("baloon2").innerHTML = "<img src='" + dispImages[rnd] + "'/>";
            }
            else if (document.getElementById("baloon3")){
                document.getElementById("baloon3").innerHTML = "<img src='" + dispImages[rnd] + "'/>";
            }
}

这一切都在被调用到 php 页面的 scripts.js 文件中。

更正了函数名称

继承人的html

echo'
<div id="baloon1">
    <img src="' . $randomImage . '">
</div>
<div id="baloon2">
    <img src="' . $randomImage2 . '">
</div>
<div id="baloon3">
    <img src="' . $randomImage2 . '"/>
</div>';

标签： javascript

Answer 1

在这里，我们绑定到每个鸡蛋，方法相同。

document.querySelectorAll('.egg').forEach(egg => {
  egg.addEventListener("click", (event) =>  {
    console.log(`you clicked on ${event.target.id}`);
  });
  
});

<div id="egg1" class="egg"> Egg1 </div>
<div id="egg2" class="egg"> Egg1 </div>
<div id="egg2" class="egg"> Egg3 </div>