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

Question

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

这是它的代码笔的链接

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

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

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()消息，并且在单击它时可以工作。 我在这里做错了什么？

Answer 1

增加数组将不起作用，只会产生错误。

forward()应该删除轮播的实际子元素，并添加一个新的子元素，该子元素的值是slider数组的下一个元素：

引入currentSlide数字变量以指示当前显示的索引，并在forward()对其进行递增。

var currentSlide = 0;
...
carrousel.appendChild(slider[currentSlide]);
...

function forward() {

  carrousel.removeChild(slider[currentSlide++]);
  if (currentSlide >= slider.length){
     currentSlide = 0; 
  }
  carrousel.appendChild(slider[currentSlide]);
}

Answer 2

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

 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> 

Answer 3

您只需要替换元素即可，仅递增该元素将不起作用：

我在脚本中添加了一个计数器“ silderPos”，因此您可以在每次单击时将其递增一。

如果它大于2，它将通过模运算返回到0。

我将carrouselElement设置为全局，以便您的单击脚本可以直接访问该元素。

通过此更改，我现在可以遍历您的所有元素。

请在此处找到修改后的源代码：

var carrouselElement;
var sliderPos = 0;
function carrousel()
{
    carrouselElement = 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]

carrouselElement.appendChild(slider[0]);

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

function forward() {
        carrouselElement.lastChild.remove();
        sliderPos++;
        sliderPos = sliderPos % 3;
        carrouselElement.appendChild(slider[sliderPos]);
    }

    /*backButton.addEventListener('click', back)*/
    forwardButton.addEventListener('click', forward)

}

window.addEventListener('load', carrousel);