Passing function with 2 arguments to addEvent Listener method

Question

I am trying to pass a function Which has 2 arguments to the addEventListener method on specific button but the problem is function executing directly when page loading instead of executing it when some one clicked the button.

I know how to make it work with anonymous function but I need it to work with a specific defined function instead.

function changeContent(elem,str){
    elem.textContent = str;
}

var btn = document.querySelector("button");

var p = document.querySelector("p");

var content = "Someone Clicked the Button!";

// add event listener on click to the button 

// version 1 with anonymous function worked as expected

btn.addEventListener("click",function(){
    p.textContent = content;
});

// version 2 with specific defined function not working as expected

 btn.addEventListener("click",changeContent(p,content));

any idea of the reason why second version isn't working and how to make it work as expected.

Update:

my intended and important question:

is there any way to make changeContent(p,content) function work without wrap it with a (anonymous) function in addEventListener method ?

Julian · Accepted Answer · 2017-04-02 21:01:10Z

3

Wrap it also in an anonymous function

btn.addEventListener("click",function() { 
    changeContent(p, content)
});

any idea of the reason why second version isn't working

Because changeContent is intermediate called because you're passing arguments to it (with the round brackets). In general you could pass a function to a function in two ways:

Only the name, e.g. passFunction(changeContent);
Wrap in a (anonymous) function, as shown above passFunction(function() { changeContent( ...);} );. The anonymous function isn't called intermediately, because you aren't passing parameters to it.

can you explain this point changeContent is intermediate called

If you pass arguments to a function, it's called. If you wrap it in an (anonymous) function, without passing arguments to the (anonymous) function, the (anonymous) function isn't called and hence also not the wrapped function.

is there any way to make it work without wrap it with a (anonymous) function

Use the .bind function. The first argument is the value of this. So you need 3 parameters for this case:

btn.addEventListener("click",changeContent.bind(this, p, content));

For more info, see the docs of .bind

edited Apr 2, 2017 at 21:01

answered Apr 2, 2017 at 20:22

Julian

37.3k24 gold badges138 silver badges196 bronze badges

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

9 Comments

Oghli Over a year ago

can you explain this point changeContent is intermediate called

Oghli Over a year ago

I understand that you can't pass function to another function if it called like that functionName(functionName(argument1,argument2)) is it right?

Oghli Over a year ago

it should be like that without the round brackets functionName(functionName)

Julian Over a year ago

yes indeed. If you pass arguments (round brackets) to a function, it's called. Updated the answer.

Julian Over a year ago

indeed. And because we aren't passing the round brackets to the (anonymous) function, the (anonymous) function isn't called intermediately

|

Collectives™ on Stack Overflow

Passing function with 2 arguments to addEvent Listener method

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related