在javascript中使用for循环为音频文件分配不同的源

我正在尝试构建一个音板（类似于therapboard.com），我希望javascript在单击图像时通过循环创建图像（名为niels1.png，niels2.png…）以及合适的声音（1.ogg，2.ogg…）

图像部分工作，当我点击任何图像时，也会播放一个声音，但声音是相同的（在本例中是循环中的最后一个声音…所以3.ogg）。到目前为止，我想用一个相当简单的开始就能实现吗

    <script>
var i;
for(i=0; i<4; i++){
    var imgsrc = "niels" + i + ".png";
    var audiosrc = i + ".ogg";
    var image = document.createElement("IMG");
    image.setAttribute("src", imgsrc);
    image.addEventListener('click', myPlay);

    var audio = document.createElement('audio');
    audio.src = audiosrc;

    function myPlay(){
        var audio = new Audio (audiosrc);
        audio.play();
    }

    document.body.appendChild(image);

}
</script>

var i；
对于（i=0；i试试这个。你有一个闭包问题，这样就不需要闭包了

document.body.addEventListener（'click'，函数（e）{
var tgt=e.target；
如果（tgt.tagName==“IMG”）{
var audiosrc=tgt.getAttribute（“数据音频”）；
中频（音频SRC）{
var audio=新音频（audiosrc）；
音频播放（）；
}
}
})
对于（变量i=0；i<4；i++）{
var imgsrc=“niels”+i+“.png”；
var audiosrc=i+“.ogg”；
var image=document.createElement（“IMG”）；
setAttribute（“数据音频”，audiosrc）
setAttribute（“src”，imgsrc）；
document.body.appendChild（图像）；
}
试试这个。你有一个关闭问题，这样就不需要关闭了

document.body.addEventListener（'click'，函数（e）{
var tgt=e.target；
如果（tgt.tagName==“IMG”）{
var audiosrc=tgt.getAttribute（“数据音频”）；
中频（音频SRC）{
var audio=新音频（audiosrc）；
音频播放（）；
}
}
})
对于（变量i=0；i<4；i++）{
var imgsrc=“niels”+i+“.png”；
var audiosrc=i+“.ogg”；
var image=document.createElement（“IMG”）；
setAttribute（“数据音频”，audiosrc）
setAttribute（“src”，imgsrc）；
document.body.appendChild（图像）；
}
非常感谢！这样做非常有效+我可以了解更多关于关闭问题的信息，因为这是我现在深入了解的内容。非常感谢！这样做非常有效+我可以了解更多关于关闭问题的信息，因为这是我现在深入了解的内容。