JS onclick 不执行幻灯片

Question

我正在尝试使用 W3.CSS Slideshow 部分 "Slideshow Indicators"。

但是我需要使用 JS 动态创建上一个和下一个按钮。

但出于某种原因，上一个和下一个按钮不起作用..！（点击时没有任何反应）

这是我的代码：

HTML代码：

    <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代码：

  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);

};

这些按钮在 html 文件中创建时可以正常工作，但是一旦我使用 js 创建它们，它们就被创建了，但是 onclick 函数不起作用..

Answer 1

在传递参数的情况下，像prev.addEventListener("click", function() { plusDivs(-1) });

那样绑定

这是一个例子：

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>

JS onclick 不执行幻灯片

JS onclick not executing for slideshow

html

javascript

w3c

onclick

w3.css