JS onclick 不为幻灯片执行答案

【问题标题】：JS onclick not executing for slideshowJS onclick 不为幻灯片执行
【发布时间】：2016-08-02 11:48:21
【问题描述】：

我正在尝试使用W3.CSS Slideshow，“幻灯片指示器”部分。

但是我需要使用 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 功能不起作用..

【问题讨论】：

因为您是立即调用plusDivs 函数，而不是在点击事件上...使用next.addEventListener("click", function() {plusDivs(1);});
控制台有错误吗？
你是对的 Jaromanda ！把你的评论作为答案，把它标记为正确的。谢谢哈桑问题解决了！

标签： javascript html onclick w3c w3.css

【解决方案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>

【讨论】：