Question

Im pretty new to HTML5/Javascript/CSS3 and im confused on exactly how to pass the id of my event listener to the new function. I’m building a video player and this is the volume up and down part, and I would rather be able to use one function for both volume up and volume down using if statements, which would check the id.

Here is what im working with:

 volume_up = document.getElementById('volume_up'); //get the volume_up button
 volume_up.addEventListener('click', volumeUp, false); //call function "volumeUp" on click

Here is the “volumeUp” function:

function volumeUp(click_button){
alert(click_button.id); // i want to be able to get the id here
myMovie.volume = myMovie.volume - 0.1;
}

If i was able to get the ID, i could do vol up and vol down in this one function instead of 2 via if statements.

I have tried doing this:

   volume_up.addEventListener('click', volumeUp(volume_up), false);

and

    volume_up.addEventListener('click', volumeUp(volume_up.id), false);

with no luck. I have the volume up button linked up, and whenever i press it, the volume does change, and the alert does popup, but it says undefined.

Any help would be appreciated. Thanks 🙂

Answer 1

In the event handler “this” is bound to the element that fired the event, so you can just use “this.id”.

Check out this example: http://jsfiddle.net/vyGdJ/