我不知道為什么我的 backgroundImage 不起作用

Question

為什么我的橫幅沒有改變她的背景？ 請幫我。

當我運行該文件時，控制台告訴我：

未捕獲的類型錯誤：flechedroite.addEventListener 不是函數

我真的不明白。 我是 Javascript 的初學者，所以請用友好的語言向我解釋如何修復此錯誤:)

var flechedroite = document.getElementsByClassName('fa-arrow-right');
var flechegauche = document.getElementsByClassName('switch-left');
var banner = document.getElementById('banner');
var images = [];

var changeBackground = function (bElement, bUrl) {
    return bElement.style.backgroundImage = "url(" + bUrl + ")";
}

//image list
images[0] = 'images/image1.jpg';
images[1] = 'images/image2.jpg';
images[2] = 'images/image3.jpg';

flechedroite.addEventListener('click', function() {
    for (var i = 0; i < images.length; i++) {
        changeBackground(document.body, images[i]);
    }
})

Answer 1

1. addEventListener應該在window.onload或$(document).ready()中調用
2. 由於 getElementsByClassName 返回一個數組，因此您需要將數組索引與 flechedroite 一起使用以添加事件偵聽器。 即flechedroite[0].addEventListener('click', function() {...});
3. 您正在循環中調用changeBackground函數來設置背景圖像，實際上您只會看到數組中的最后一張圖像被設置為背景。

JS代碼

var  images = [];

var changeBackground = function (bElement, bUrl) {
    return bElement.style.backgroundImage = "url("+bUrl+")";
}

//image list
images[0] = 'https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg';
images[1] = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOGUhZo0Qe81U5qY_Z-seXgsD79LEEet832TVOlLMOEy10ZPsV';
images[2] = 'https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_960_720.jpg';


window.onload = function(){
    var flechedroite = document.getElementsByClassName('fa-arrow-right');
    var flechegauche = document.getElementsByClassName('switch-left');
    var banner = document.getElementById('banner');
    var currentImageIndex = 0;
    flechedroite[0].addEventListener('click', function() {
        currentImageIndex = (currentImageIndex+1)%images.length;
        changeBackground(document.body, images[currentImageIndex]);
    })
}

Answer 2

函數 getElementsByClassName 返回一個 HTMLCollection，它是一個類似數組的結構，可以包含多個元素。 所以需要使用索引來訪問其中包含的元素。

所以 flechedroite.addEventListener 導致錯誤但 flechedroite[0].addEventListener 應該工作

https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassName

Answer 3

如果你使用'getElementsByClassName'並且你想添加一個'addEventListener'，你不能以'通用'的方式做到這一點： "flechedroite.addEventListener ('click', function () {}" 。你必須這樣做每個元素：

        var flechedroite = document.getElementsByClassName('fa fa-arrow-right');

    //flechedroite  contains all the elements that have the 'fa fa-arrow-right' classes

    //on each element you have to add the "addEventListener"

        for (var i = 0; i < flechedroite.length; i++) {
           flechedroite[i].addEventListener('click', function() {
             alert('flechedroite');
           });
        }

基本示例JSFiddle1

一個更高級的例子JSFiddle2