JS onclick pas d'exécution pour le diaporama

J'essaie d'utiliser W3.CSS Slideshow, la section "Indicateurs de diaporama".JS onclick pas d'exécution pour le diaporama

Cependant, j'ai besoin de créer dynamiquement les boutons précédent et suivant en utilisant JS.

Mais pour une raison quelconque, les boutons prev et next ne fonctionnent pas ..! (Rien ne se passe onclick)

Voici mon code:

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

Code de Js:

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

};

Les boutons ont travaillé lors de sa création dans le fichier html, mais une fois que je les ai créés en utilisant js ils se sont créés, mais la fonction onclick ne fonctionne pas ..

Source

2016-08-02 Mortada

parce que vous appelez la fonction 'plusDivs' immédiatement plutôt que sur l'événement click ... utilisez' next.addEventListener ("click", function() {plusDivs (1);}); ' –

avez-vous une erreur? dans la console? –

Vous avez raison Jaromanda! Mettez votre commentaire comme une réponse pour le marquer comme correct .. Merci Hasan Problem Solved! – Mortada

En cas de passage de paramètres, se lient comme prev.addEventListener("click", function() { plusDivs(-1) });

Voici un exemple:

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>

Source

2016-08-02 12:13:32 Pugazh

JS onclick pas d'exécution pour le diaporama

Répondre

Questions connexes