JS Onclick nicht für die Diashow

Ich versuche W3.CSS Slideshow, den Abschnitt "Slideshow Indikatoren" zu verwenden.JS Onclick nicht für die Diashow

Allerdings muss ich die vorherigen und nächsten Schaltflächen dynamisch mit JS erstellen.

Aber aus irgendeinem Grund funktionieren die Tasten prev und next nicht. (Nichts passieren Onclick)

Hier ist mein Code:

HTML-Code:

<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-Code:

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

};

Die Tasten arbeiten, wenn sie in der HTML-Datei erstellt, aber sobald ich sie sie erstellt wurden unter Verwendung js erstellt, aber die Onclick-Funktion funktioniert nicht ..

Quelle

2016-08-02 Mortada

weil Sie rufen Sie die 'plusDivs' -Funktion sofort und nicht auf das Click-Ereignis ... verwenden' next.addEventListener ("Klicken Sie auf, Funktion() {plusDivs (1);});' –

haben Sie Fehler in der Konsole? –

Sie haben Recht Jaromanda! Setzen Sie Ihren Kommentar als Antwort, um es als richtig zu markieren. Danke Hasan Problem gelöst! – Mortada

Bei Übergabe von Parametern, binden sie wie prev.addEventListener("click", function() { plusDivs(-1) }); Hier

ist ein Beispiel:

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>

Quelle

2016-08-02 12:13:32 Pugazh

JS Onclick nicht für die Diashow

Antwort

Verwandte Themen