0

I was transferring all my JavaScript code to external file :

One of the inline codes were like this :
onclick="nextPrev(-1)" ; onclick="nextPrev(1)"

The method I tried was :
document.getElementById("nextPrev").addEventListener("click", nextPrev(1))
document.getElementById("nextPrev").addEventListener("click", function(){nextPrev(1)})

The second line of code works fine, i.e, triggered on the click of button. While the first code is a type of automatic (means value is shown without any click event).

So wanted to know the difference between both method I used in external file. Also if there is any other method to write onclick="nextPrev(1)" in external file please feel free to point out.

Here is a working snippet :

function nextPrev(e){
document.getElementById("demo").innerHTML = e;
}

document.getElementById("nextBtn1").addEventListener("click", nextPrev1(1))
function nextPrev1(e){
document.getElementById("demo1").innerHTML = e;
}

document.getElementById("nextBtn2").addEventListener("click", function() {
  nextPrev2(1)
})
function nextPrev2(e){
document.getElementById("demo2").innerHTML = e;
}
<button type="button" id="nextBtn" onclick="nextPrev(1)">onclick="nextPrev(1)"</button>
<div id="demo"></div>

<button type="button" id="nextBtn1">func(var)</button>
<div id="demo1"></div>

<button type="button" id="nextBtn2">function(){func(var)}</button>
<div id="demo2"></div>

Thanks for help in advance

Rana
  • 2,500
  • 2
  • 7
  • 28
  • @Bergi can you **plz** tell, how the duplicate tells the difference between the asked question. So that I don't reopen the question again – Rana Oct 30 '21 at 19:28
  • It explains the difference between passing a function that does the call and passing the result of a call. – Bergi Oct 30 '21 at 19:31
  • That doesn't make a difference, the concept of passing a function (or not) is the same – Bergi Oct 30 '21 at 19:35
  • 1
    But I've linked another canonical explanation that doesn't use jQuery, if it helps – Bergi Oct 30 '21 at 19:37

2 Answers2

1
document.getElementById("nextPrev").addEventListener("click", nextPrev(1))

This will call nextPrev(1) immediately (hence giving the impression that the event is executed immediately) and set its returned value as the event listener callback.

document.getElementById("nextPrev").addEventListener("click", function(){nextPrev(1)})

This will set the event listener callback to a function which calls nextPrev(1) whenever the event is executed. Whenever the event is fired, the function is called, and only then is nextPrev(1) called.

Spectric
  • 30,714
  • 6
  • 20
  • 43
  • 1
    Thanks for the response Spectric (+1). Can you tell which is the right way to write `onclick="nextPrev(1)"` as external event. And can you tell a little more about callback. – Rana Oct 30 '21 at 19:07
  • @Rana Writing `onclick="nextPrev(1)"` is perfectly fine. You should be using the second code block in my answer. – Spectric Oct 30 '21 at 19:07
  • Yes but as some say that it is better to separate `html` from `CSS` and `JS`, so in that contrast how to write that (`onclick="nextPrev(1)"`) as external event – Rana Oct 30 '21 at 19:10
  • @Rana In that case, you should use `addEventListener` and wrap `nextPrev(1)` in a function (the second code block in my answer) – Spectric Oct 30 '21 at 19:20
1

The difference is as simple as illustrated below:

function callme(){
console.log("hello");
}
//Does not run until callmeWrapper is executed
function callmeWrapper(){
callme();
}

//Runs automatically
callme();

The second argument of addEventListener has to be the function that is supposed to run.

In this case : document.getElementById("nextPrev").addEventListener("click", function(){nextPrev(1)})

when you are wrapping in a function definition, the nextPrev function is not run. Here when this line is encountered in the code, the wrapper function is attached as an event handler.

In this case,: document.getElementById("nextPrev").addEventListener("click", nextPrev(1))

you are not attaching anything. Here as soon as this line is encountered in the code, the function is run. And the return value(undefined by default) is assigned as an event handler. That will do nothing on click.

Tushar Shahi
  • 16,452
  • 1
  • 18
  • 39
  • Thanks for the response Tushar Shahi(+1). – Rana Oct 30 '21 at 19:07
  • Tushar as both events are triggered(**should**) on `click` as added a event listener. So why one without a wrapper don't wait for event. – Rana Oct 30 '21 at 19:13
  • I have edited the answer. In non working case you are simply running the function and not attaching any function. You have to give the function name to attach it to event listener – Tushar Shahi Oct 30 '21 at 19:16
  • Also can you tell which is the right way to write `onclick="nextPrev(1)"` as external event. – Rana Oct 30 '21 at 19:25