如何在javascript中将DOM元素作为参数传递？

Question

我想将myVideo元素作为参数传递给play（）函数，但是它不起作用？ （它会自动播放视频，而eventListener不再起作用）

如果我直接在函数中使用元素，它将起作用。 所以我想知道是否有可能将DOM元素作为参数传递，如果可以，是否曾经使用过

这是下面的代码：

// Get our elements
const myVideo = document.querySelector(".player__video");
const playButton = document.querySelector(".player__button");
console.log(myVideo);

function play(video) {

    if (video.paused) {
        video.play();
    } else {
        video.pause();
    }
}

playButton.addEventListener('click', play(myVideo))

Answer 1

playButton.addEventListener('click', function(){play(myVideo)})

您需要传递一个函数，但是您传递的是函数的结果。 JavaScript具有一流的功能，因此请习惯一下。

Answer 2

const myVideo = document.querySelector(".player__video");
const playButton = document.querySelector(".player__button");
console.log(myVideo);

function play(video) {

    if (video.paused) {
        video.play();
    } else {
        video.pause();
    }
}

playButton.addEventListener('click', () => play(myVideo) );

将有效。 addEventListener要求第二个参数作为Function，但是您传递了一个未定义的值。