JS onclick not executing for slideshow

I am trying to use W3.CSS Slideshow, the section "Slideshow Indicators".

However I need to create the previous and next buttons dynamically using JS.

But for some reason the prev and next buttons are not working..! (nothing happen onclick)

Here is my code:

HTML Code:

    <title>Pre:D</title>
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
    <script src="script.js"></script>
</head>

<body>

    <div class="w3-row-padding" style = "width: 800px" id="form">

        <div class="mySlides">First Slide</div>

        <div class="mySlides">Second Slide</div>

        <div class="mySlides">Third Slide</div>

    </div>

    <div id="toggle" class="w3-center" style = "width: 800px">

    </div>

</body>

Js Code:

  var slideIndex = 1;
  function plusDivs(n) {
    showDivs(slideIndex += n);
  }

  function currentDiv(n) {
    showDivs(slideIndex = n);
  }

 function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    //var dots = document.getElementsByClassName("demo");
    if (n > x.length) {slideIndex = 1}
    if (n < 1) {slideIndex = x.length}
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";
    }

    x[slideIndex-1].style.display = "block";

  }

window.onload=function(){


  var dump = document.getElementById("toggle");

  var sec = document.createElement("div");
  sec.className = "w3-section";

  var prev = document.createElement("button");
  prev.className = "w3-btn";
  prev.addEventListener("click", plusDivs(-1));
  prev.innerHTML = "Previous";

  var next = document.createElement("button");
  next.className = "w3-btn";
  next.addEventListener("click", plusDivs(1));
  next.innerHTML = "Next";

  sec.appendChild(prev);
  sec.appendChild(next);

  dump.appendChild(sec);

  showDivs(slideIndex);

};

The buttons were working when created in the html file, but once I created them using js they got created but the onclick function doesn't work..

Solution

In case of passing parameters, bind it like prev.addEventListener("click", function() { plusDivs(-1) });

Here is an Example:

var slideIndex = 1;

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
}

window.onload = function() {
  var dump = document.getElementById("toggle");
  var sec = document.createElement("div");
  sec.className = "w3-section";

  var prev = document.createElement("button");
  prev.className = "w3-btn";
  prev.addEventListener("click", function() {
    plusDivs(-1)
  });
  prev.innerHTML = "Previous";

  var next = document.createElement("button");
  next.className = "w3-btn";
  next.addEventListener("click", function() {
    plusDivs(1)
  });
  next.innerHTML = "Next";

  sec.appendChild(prev);
  sec.appendChild(next);
  dump.appendChild(sec);
  showDivs(slideIndex);
};

<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet" />

<div class="w3-row-padding" style="width: 800px" id="form">

  <div class="mySlides">First Slide</div>
  <div class="mySlides">Second Slide</div>
  <div class="mySlides">Third Slide</div>

</div>

<div id="toggle" class="w3-center" style="width: 800px">
</div>