How to pass local variable value from function to addEventListener function?

Question

Here is code for example(JavaScript),

function f(){

   var x = new Audio('Audio URL')
   var divID = document.getElementById('id of a div');

   if(divID){
      divID.addEventListener("webkitAnimationEnd",g);
      divID.addEventListener("animationend",g);
  }
}


function g(){
    //Code that uses variable x value and functions i.e x.pause() or x.play()
}

How to pass the variable x value in function f() to function g() in addEventListener?

the function g is callback function so you can pass data to g from webkitAnimationEnd — Abid Nawaz
– Abid Nawaz, Commented Nov 22, 2017 at 21:55
Can I pass var x value to g() from webkitAnimationEnd? if then how? — Frosty
– Frosty, Commented Nov 22, 2017 at 21:56
you can use .bind to return a new bound function with seeded arguments. not a great solution, but a possibility. g.bind(elm, x) — rlemon
– rlemon, Commented Nov 22, 2017 at 21:57
The first argument to addEventListener should be a quoted string. — Barmar
– Barmar, Commented Nov 22, 2017 at 22:04

nsevens · Accepted Answer · 2017-11-22 21:55:47Z

2

You can try something like:

function f(){

   var x = new Audio('Audio URL')
   var divID = document.getElementById('id of a div');

   if(divID){
      divID.addEventListener(webkitAnimationEnd, () => g(x));
      divID.addEventListener(animationend, () => g(x));
  }
}


function g(x){
    //Code that uses variable x value and functions i.e x.pause() or x.play()
}

Or, if you want ES5 support, divID.addEventListener(webkitAnimationEnd, function() { g(x); });

answered Nov 22, 2017 at 21:55

nsevens

2,8551 gold badge21 silver badges38 bronze badges

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

Comments

CRice · Accepted Answer · 2017-11-22 21:57:20Z

1

Probably you'll want to do this with a closure:

function f(){

   var x = new Audio('Audio URL')
   var divID = document.getElementById('id of a div');

   if(divID){
      divID.addEventListener(webkitAnimationEnd, makeG(x));
      divID.addEventListener(animationend, makeG(x));
  }
}

function makeG(x) {
    return function() {
        //Code that uses variable x value and functions i.e x.pause() or x.play()
    }
}

answered Nov 22, 2017 at 21:57

CRice

32.6k5 gold badges63 silver badges75 bronze badges

Collectives™ on Stack Overflow

How to pass local variable value from function to addEventListener function?

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