Mortada Mortada - 4 months ago 34
HTML Question

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..

Answer

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>