JS onclickがスライドショーで実行されていません

W3.CSS Slideshow「スライドショーインジケータ」セクションを使用しようとしています。JS onclickがスライドショーで実行されていません

しかし、JSを使用して前と次のボタンを動的に作成する必要があります。

何らかの理由で、前のボタンと次のボタンが機能していません。

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コード：

（何のonclick起こる）

は、ここに私のコードではありません個の

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

};

ボタンは、パラメータを渡す場合は...

出典

2016-08-02 Mortada

clickイベントではなく、すぐに 'plusDivs'関数を呼び出しているので... next.addEventListener（" click "、function（）{plusDivs（1）;}）;' –

エラーが出ましたコンソールで？ –

あなたは正しいジャロマンダです！正しいものとしてマークする答えとしてurのコメントを入れてください..ありがとうHasan Problem Solved！ – Mortada

をhtmlファイルで作成されたときに働いて、私は、彼らが作成してしまったJSを使用して作成したが、onclickの機能が動作しない一度して、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がスライドショーで実行されていません

答えて

関連する問題