버튼 이벤트 리스너가 작동하지 않습니다. JavaScript

HTML 내에서 'OnClick'이벤트가 포함 된이 슬라이드 쇼 기능에 대해 this W3c 자습서를 따르고 있습니다. 그러나, 나는 제대로 연결되어있는 별도의 파일에서 JavaScript를 사용하여 동일한 것을 재현하려고하며, 대신 '클릭'이벤트 리스너를 사용하여 슬라이드 쇼 내에서 오른쪽과 왼쪽으로 이동하는 동일한 작업을 수행합니다. 그러나 작동하지 않는 것 같습니다. JS 콘솔 오류가 없으며 구문이 정상입니다. 나는 JS 코드를 IIFE (Immediately Invoked Function Expression)에 넣었다.버튼 이벤트 리스너가 작동하지 않습니다. JavaScript

<!DOCTYPE html> 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
<body> 

<h2 class="w3-center">Manual Slideshow</h2> 

<div class="w3-content w3-display-container"> 
    <img class="mySlides" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%"> 
    <img class="mySlides" src="https://www.pexels.com/photo/scenic-view-of-the-mountain-734659/" style="width:100%"> 
    <img class="mySlides" src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%"> 
    <img class="mySlides" src="https://www.pexels.com/photo/scenic-view-of-the-mountain-734659/" style="width:100%"> 

    <button id="left" class="w3-button w3-black w3-display-left" >&#10094;</button> 
    <button id="right" class="w3-button w3-black w3-display-right" >&#10095;</button> 
</div> 

<script src="scripts.js" ></script> 

</body> 
</html>

(function(){ 
let left = document.getElementById("left"); 
let right = document.getElementById("right"); 
var slideIndex = 1; 
showDivs(slideIndex); 

function plusDivs(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"; 
}; 

left.addEventListener("click", plusDivs(-1)); 
right.addEventListener("click", plusDivs(1)); 
})();

여기

JS 바이올린 : 당신이 반환을 일으키는 원인이되는 기능 (plusDivs)를 호출 immediatly 대신 그것을 참조를 전달하기 때문에 https://jsfiddle.net/pf0t32h6/

출처

2017-12-26 mts396

사이드 노트. JsFiddle에서는 스크립트를 참조 할 필요가 없습니다. . 나를 위해 그것이 오류를 낳고 있었다. –

@JasonAllshorn 이것을 명심하십시오. – mts396

입니다 plusDivs()의 값 (그냥 정의되지 않은 상태로 유지됨)은 두 가지 모두의 addEventListener으로 전달됩니다. 톤. bind()을 사용하거나 함수 호출을 함수에 넣을 수 있습니다.

어느

left.addEventListener("click", plusDivs.bind(null, -1));

하거나 undefined을 반환하도록 스크립트를 실행할 때 plusDivs를 호출하는 다른 함수

left.addEventListener("click", function() { plusDivs(-1); });

출처

2017-12-26 23:46:02 baao

고마워요! 지금은 훌륭한 설명입니다. – mts396

를 사용 bind.

left.addEventListener("click", function(){ 
    plusDivs(-1) 
}); 
right.addEventListener("click", function(){ 
    plusDivs(1) 
});

출처

2017-12-26 23:48:15

도움 주셔서 감사합니다. – mts396

버튼 이벤트 리스너가 작동하지 않습니다. JavaScript

답변

관련 문제