ボタンのイベントリスナーが動作しません - バニラ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フィドル：https://jsfiddle.net/pf0t32h6/

出典

2017-12-26 mts396

サイドノートです。 JsFiddleでは、スクリプトを参照する必要はありません。。私にとっては、それは間違いを引き起こしていた。 –

@JasonAllshornこれを念頭に置いてください。 – mts396

あなたが機能（plusDivs）を呼び出すすぐに代わりのそれへの参照を渡し、リターンを引き起こしているためですplusDivs()の値（これはちょうど未定義です）は、両方のaddEventListenerに渡されますがトン。 bind()を使用するか、関数呼び出しを関数に入れることができます。

どちらかbind

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

または

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

出典

2017-12-26 23:46:02 baao

ありがとう！それは今すぐうまくいく - 大きな説明。 – mts396

別の関数を使用することがundefinedを返すようにスクリプトを実行するときには、plusDivsを呼び出します。

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

出典

2017-12-26 23:48:15

ご協力いただきありがとうございます。 – mts396

ボタンのイベントリスナーが動作しません - バニラJavaScript

答えて

関連する問題