javascript - 为什么我的变量没有增加？

我正在尝试构建一个非常基本的滑块。我设法创建了一些东西，但是当我尝试从一张幻灯片换到另一张幻灯片时，我陷入了困境。我当时以为我的代码可以用，但是不能用，我不明白为什么。

Here's a link to a codepen of it

这是我的问题的相关部分：

我已经定义了一个滑块，如下所示：

var carrousel = document.getElementById('carrouselcontainer');

var slide1 = document.createElement('div');
slide1.className = 'slide1';

var slide2 = document.createElement('div');
slide2.className = 'slide2';

var slide3 = document.createElement('div');
slide3.className = 'slide3';

var slider = [slide1, slide2, slide3]

carrousel.appendChild(slider[0]);

这确实有效。现在，我正在尝试添加一个函数，该函数将在单击时增加或减少滑块变量。

var backButton = document.getElementById('backButton');
var forwardButton = document.getElementById('forwardButton')

function forward() {
  slider++
}

forwardButton.addEventListener('click', forward)

但是，当我单击forwardButton元素时，什么也没有发生。我知道eventListener在工作，因为我尝试在其上输入window.alert()消息，并且在单击它时可以正常工作。我在这里做错了什么？

最佳答案

您需要使用某种索引来从数组中获取内容：

var forwardButton = document.getElementById('forwardButton');
var result = document.getElementById('carrouselcontainer');
var sliderIndex = 0;


var slider1 = document.createElement("div");
slider1.innerHTML = "item 1";
var slider2 = document.createElement("div");
slider2.innerHTML = "item 2";
var slider3 = document.createElement("div");
slider3.innerHTML = "item 3";

var slider = [slider1, slider2, slider3];
result.appendChild(slider[sliderIndex]);

function forward() {
  result.removeChild(slider[sliderIndex]);
  sliderIndex = (sliderIndex + 1) % slider.length;
  result.appendChild(slider[sliderIndex]);
}

forwardButton.addEventListener('click', forward);

<button id="forwardButton">Increment</button>
<div id="carrouselcontainer"></div>