How can I pass a DOM element as a parameter in javascript?

Question

I want to pass the myVideo element as a parameter in the play() function, but it does not work? (It is auto-playing the video instead and the eventListener no longer works)

If I use the element directly in the function it work. So I am wondering is it ever possible to pass a DOM element as a parameter and if so is it ever used

Here is the code below:

// 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))

Do you get any errors in the console?

phuzi
– phuzi

2018-04-19 07:35:01 +00:00
Commented Apr 19, 2018 at 7:35 — phuzi
– phuzi, Commented Apr 19, 2018 at 7:35

bugwheels94 · Accepted Answer · 2018-04-19 07:37:16Z

1

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

You need to pass a function but instead you are passing the result of a function. JavaScript has first class functions, so get used to this thing.

answered Apr 19, 2018 at 7:37

bugwheels94

32.2k3 gold badges43 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Isitea · Accepted Answer · 2018-04-19 07:38:29Z

0

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) );

will works. addEventListener requires the second parameter as a Function, but you passed a value as undefined.

answered Apr 19, 2018 at 7:38

Isitea

7615 silver badges13 bronze badges

Collectives™ on Stack Overflow

How can I pass a DOM element as a parameter in javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related