基本手动图像幻灯片 JavaScript 代码使所有图像不可见并抛出错误

Question

我正在尝试通过利用来自多个来源的信息来实现一个简单的图像滑块。 CSS 和 HTML 似乎设置得很好，但是当我添加 JavaScript 逻辑时，所有图像都消失了。控制台显示 "Uncaught TypeError: Cannot read property 'style' of undefined" 错误，这表明包含图像的元素数组为空。我在抛出错误的那一行之前在控制台中记录了这个数组，并按预期获得了三张图像。

此外，我正在使用 Web Maker，因此无法使用 "onclick"。有什么建议么？我知道这是基本的东西，但我只是没有看到这个问题。（下面的代码）

HTML

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <style>

    </style>
  </head>
  <body>
    <div id="myslider">
      <img class="slide" src="http://chromethemer.com/wallpapers/chromebook-wallpapers/download/work-space-3840x2160.jpg">
      <img class="slide" src="http://lindstrominsuranceagency.com/wp-content/uploads/2015/10/business.jpeg">
      <img class="slide" src="http://www.nomisconnections.co.uk/wp-content/uploads/2016/10/image-1377543510.jpg">
      <button id="left-button"><i class="fa fa-chevron-left"></i></button>
      <button id="right-button"><i class="fa fa-chevron-right"></i></button>
    </div>
  </body>
</html>

CSS

#myslider {
  position: relative;
  height: 360px;
  width: 700px;
}

.slide {
  height: 100%;
  width: 100%;
  position: absolute;
/*   opacity: 0; */
  transition: 1s;
}

button {
  position: absolute;
  z-index: 1;
  top: 50%;
  background: rgba(0,0,0,0.8);
  border: none;
  padding: 10px;
  color: #fff;
  cursor: pointer;
}

button:nth-of-type(2) {
  right: 0;
}

JavaScript

document.getElementById("left-button").addEventListener("click", plusDivs(-1));
document.getElementById("right-button").addEventListener("click", plusDivs(1));

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  console.log("inside of plusDiv(n)");
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("slide");
  console.log(x);
  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";
}

Answer 1

您以无效的方式在 addEventListener 方法中插入了回调函数。如果你想在函数中传递参数，你应该在匿名函数中调用函数。

您可以：

如果不需要使用函数参数，则插入函数对象。

function someFunction(){
   ...
}
elem.addEventListener('click', someFunction);

插入一个匿名函数

elem.addEventListener('click', function(){
   ...
});

在匿名函数中插入一个带参数的函数

function someFunction(parameter){
   ...
}
elem.addEventListener('click', function(){
   someFunction(parameter);
});

我建议阅读 MDN 文档：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

PS：您真的不想调用变量 x、n 和 i。使用更具描述性的内容。

您的代码更新了 addEventListener 方法

document.getElementById("left-button").addEventListener("click", () => {plusDivs(-1)});
document.getElementById("right-button").addEventListener("click", () => {plusDivs(1)});

var slideIndex = 1;
showDivs(slideIndex);

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

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("slide");
  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";
}

#myslider {
  position: relative;
  height: 360px;
  width: 700px;
}

.slide {
  height: 100%;
  width: 100%;
  position: absolute;
/*   opacity: 0; */
  transition: 1s;
}

button {
  position: absolute;
  z-index: 1;
  top: 50%;
  background: rgba(0,0,0,0.8);
  border: none;
  padding: 10px;
  color: #fff;
  cursor: pointer;
}

button:nth-of-type(2) {
  right: 0;
}

<div id="myslider">
  <img class="slide" src="http://chromethemer.com/wallpapers/chromebook-wallpapers/download/work-space-3840x2160.jpg">
  <img class="slide" src="http://lindstrominsuranceagency.com/wp-content/uploads/2015/10/business.jpeg">
  <img class="slide" src="http://www.nomisconnections.co.uk/wp-content/uploads/2016/10/image-1377543510.jpg">
  <button id="left-button"><i class="fa fa-chevron-left"></i></button>
  <button id="right-button"><i class="fa fa-chevron-right"></i></button>
</div>

基本手动图像幻灯片 JavaScript 代码使所有图像不可见并抛出错误

Basic manual image slideshow JavaScript code is making all images invisible and throwing error

html

javascript

css

slideshow

web-maker