爲什麼我的變量不增加？

我試圖構建一個非常基本的滑塊。我設法創造了一些東西，但當我試圖從一張幻燈片轉換到另一張幻燈片時，我被卡住了。我想我的代碼可以工作，但它不，我不明白爲什麼。爲什麼我的變量不增加？

這裏是我的問題的相關部分：

我已經定義了一個滑塊，像這樣：

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

這確實工作。現在我試圖添加一個函數，它會在單擊時增加或減少slider變量。

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

function forward() { 
    slider++ 
} 

forwardButton.addEventListener('click', forward)

但是當我點擊forwardButton元素時，什麼也沒有發生。我知道eventListener正在工作，因爲我嘗試了一條window.alert()消息，並且它在我點擊它時起作用。我在這裏做錯了什麼？

來源

2017-09-04 oehaut

'slider'是一個數組。當你增加（'++'）它時你期望發生什麼？ – rorschach

Slider是一個數組，因此您希望增加索引值，而不是數組本身。 – jswebb

謝謝你們。顯然我對如何操作數組的理解是錯誤的。這裏給出的例子幫助我。 – oehaut

你需要某種你用得到的東西你數組的索引：

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>

來源

2017-09-04 21:32:01

遞增陣列將無法正常工作，但只產生錯誤。

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

來源

2017-09-04 21:32:27 davidxxx

@GhostCat我希望對兩者都是:)因爲我會再次見到你，我會說一個傳說:)看你:) – davidxxx

你只更換遞增元素不起作用的元素：

我加了一個計數器「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);

來源

2017-09-04 21:43:23

爲什麼我的變量不增加？

回答

相關問題