Function is not working when called inside "addEventListener"

Question

I am trying to make a slideshow in a webpage.

I created the next and previous button for changing images in different way. The next button is working but the previous button in not working. The display property of the images is set to none by default.

var nextbutton = document.querySelector(".next");
var prevbutton = document.querySelector(".prev");
var slide = document.querySelectorAll('.slideshow');
var slideindex = 1 ;

var show = function(n){
  var i;
  if (n > slide.length) { slideindex = 1};
  if (n < 1) {slideindex = slide.length};
  for (i = 0; i < slide.length; i++) {
    slide[i].style.display = "none";
  };
  slide[slideindex-1].style.display = "block";

};

var cl = function(p) {
  show(slideindex += p);
};

/* next button is working */
nextbutton.addEventListener("click", function(){
  show(slideindex += 1 );
} );

/* previous button is not working */
prevbutton.addEventListener("click" , cl(-1));

.slideshow {
  width:100%;
  height: 500px !important ;
  border-radius: 7px;
  display: none;
 }

<section class="content-head">
        <div class="container">
            <div class="img">
                <img class="img-fluid my-5 mx-auto slideshow" id="" src="https://www.w3schools.com/howto/img_woods_wide.jpg">
            </div>
            <div class="img">
                <img class="img-fluid my-5 mx-auto slideshow" id="" src="https://www.w3schools.com/howto/img_5terre.jpg">
            </div>
            <div class="img">
                <img class="img-fluid my-5 mx-auto slideshow" id="" src="https://www.w3schools.com/howto/img_mountains.jpg">
            </div>
            <div class="img">
                <img class="img-fluid my-5 mx-auto slideshow" id="" src="https://www.w3schools.com/howto/img_lights.jpg">
            </div>
            <div class="img">
                <img class="img-fluid my-5 mx-auto slideshow" id="" src="https://www.w3schools.com/howto/img_nature.jpg">
            </div>
            <div class="img">
                <img class="img-fluid my-5 mx-auto slideshow" id="" src="https://www.w3schools.com/howto/img_snow.jpg">
            </div>
        </div>
        <div class="button container">
            <a class="prev">&#10094;</a>
            <a class="next">&#10095;</a>
        </div>
      </section>

`prevbutton.addEventListener("click" , cl(-1));` will *execute* `cl` immediately, it will not set it as a callback — VLAZ, Jun 01 '20 at 10:28
https://stackoverflow.com/questions/15886272/what-is-the-difference-between-a-function-call-and-function-reference — Teemu, Jun 01 '20 at 10:30

score 4 · Accepted Answer · answered Jun 01 '20 at 10:28

4

prevbutton.addEventListener("click" , cl(-1));

This calls the function immediately, when you bind the event, not when the event fires. You avoid this mistake when binding the next button event.

Change to:

prevbutton.addEventListener("click", evt => cl(-1));

or

prevbutton.addEventListener("click", function(evt) { cl(-1); });

answered Jun 01 '20 at 10:28

Mitya

33,629
9
60
107

Or fix `cl` - seems the intention for it to be a higher order function. – VLAZ Jun 01 '20 at 10:30

Angshu31 · Answer 2 · 2020-06-01T10:56:25.710

You could also do:

prevbutton.addEventListener("click", cl.bind(null, -1));

Why didn't your one work?

prevbutton.addEventListener("click", cl(-1));

is equivalent to:

let theReturnValue = cl(-1);
prevbutton.addEventListener("click", theReturnValue);

JavaScript calls cl(-1) and passes the return value to addEventListener

Why does this solution work

The solutuon used Function.prototype.bind which you can look up but it is equivalent to:

prevbutton.addEventListener("click", function(...args) {
  cl.call(null, -1, ...args);
});

Bind in detail

Arguments: fn.bind(thisArg[, ...args])

fn

The function.

thisArg

What the value of this will be in the function fn (or cl in this case)

...args

Optional. Predefined arguments for the function. All other arguments given in invocation will be put after these arguments.