點擊事件不適用於僅使用 Javascript 的輪播

Question

我已經挑戰自己完全用 javascript 構建一個輪播，但我不確定為什么我的點擊事件不起作用。 當我單擊下一個或上一個時，圖像應該會改變。

誰能告訴我我做錯了什么？

let area = document.getElementById("area");
/* FIRST SLIDE */
let slide = document.createElement('div');
slide.setAttribute('class','slides');
area.appendChild(slide);

let image = document.createElement('img');
image.src = "image1.jpg";
slide.appendChild(image);

/* SECOND SLIDE */
let slide2 = document.createElement('div');
slide2.setAttribute('class','slides');
area.appendChild(slide2);

let image2 = document.createElement('img');
image2.src = "image2.jpg";
slide2.appendChild(image2);


//More slides can be added here
/* PREV */
let prev = document.createElement('a');
prev.innerHTML = "PREV";
prev.setAttribute('class', 'prev');
prev.addEventListener("click", function() {
 showSlides(slideIndex += -1);
});
area.appendChild(prev);

/* NEXT */
let next = document.createElement('a');
next.innerHTML = "NEXT";
next.setAttribute('class', 'next');
next.addEventListener("click", function() {
 showSlides(slideIndex += 1);
});
area.appendChild(next);

var slideIndex = 1;
showSlides(slideIndex);

function showSlides(n) {
 console.log(n)
 var i;
 var slides = document.getElementsByClassName("slides");
 console.log(slides.length)
 if (n > slides.length) {slideIndex = 1}  // goes back to the first one  
 if (n < 1) {slideIndex = slides.length} // goes to the last one
 for (i = 0; i < slides.length; i++) {
     slides[i].style.display = "none";  
 }
 slides[slideIndex-1].style.display = "block"; 
}

Answer 1

這是因為您正在附加您的元素。 當您附加元素時，請確保將偵聽器添加到正文。 這稱為事件委托

document.addEventListener('click',function(e){
    if(e.target && e.target.id== 'brnPrepend'){
          //do something
    }
});

還在stackoverflow中檢查這個問題