javascript - 这里是soundsArray[i]中的变量“i”，不取任何值

Question

这里是soundsArray[i]中的变量“i”，不取任何值，第4行

   var soundsArray = ["crash", "kick-bass", "snare", "tom-1", "tom-2", "tom-3", "tom-4"];
    for(var i = 0; i<document.querySelectorAll(".drum").length; i++){
        document.querySelectorAll(".drum")[i].addEventListener("click", ()=>{
            var audio = new Audio(`./sounds/${soundsArray[i]}.mp3`);
            audio.play();
        });
    }  

   //document.querySelectorAll(".drum").length = 7

标签： javascript

Answer 1

有点混乱！！但是我更喜欢使用这样的东西：

document.querySelectorAll(".drum").forEach((drm) =>{
    drm.addEventListener("click", (e)=>console.log(e.target.value))
})

<button class="drum" value="crash">crash</button>
<button class="drum" value="kick-bass">kick-bass</button>
<button class="drum" value="snare">snare</button>
<button class="drum" value="tom-1">tom-1</button>
<button class="drum" value="tom-2">tom-2</button>
<button class="drum" value="tom-3">tom-3</button>
<button class="drum" value="tom-4">tom-4</button>