JS onclick不執行幻燈片

我想使用W3.CSS Slideshow，「幻燈片顯示」部分。JS onclick不執行幻燈片

但是我需要使用JS動態創建上一個和下一個按鈕。

但由於某種原因，prev和下一個按鈕不工作..！（沒有發生的onclick）

這裏是我的代碼：

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代碼：

在HTML文件創建時

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

};

的按鈕進行工作，但一旦我創造了他們使用他們得到了創建JS，但的onclick功能不起作用..

來源

2016-08-02 Mortada

因爲你立即調用'plusDivs'函數而不是點擊事件...使用'next.addEventListener（「click」，function（）{plusDivs（1）;}）;' –

你有錯誤在控制檯？ –

你是對的Jaromanda！把你的評論作爲答案標記爲正確的。謝謝哈桑問題解決！ – Mortada

在傳遞參數的情況下，將其綁定像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>

來源

2016-08-02 12:13:32 Pugazh

JS onclick不執行幻燈片

回答

相關問題