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 코드 :

여기

내 코드입니다 (아무것도 온 클릭 발생 없음) 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를 사용하지만 온 클릭 기능이 작동하지 않습니다 ..

출처

2016-08-02 Mortada

클릭 이벤트가 아닌 즉시 plusDivs 함수를 호출하기 때문에 ... next.addEventListener ("click", function() {plusDivs (1);}); ' –

오류가 발생했습니다. 콘솔에? –

당신은 바로 Jaromanda입니다! 올바른 것으로 표시하기 위해 답으로 ur 코멘트를 넣으십시오 .. 감사합니다. Hasan Problem Solved! – 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이 슬라이드 쇼에 대해 실행되지 않습니다

답변

관련 문제