javascript - 我不知道为什么我的背景图像不起作用

Question

为什么我的横幅没有改变她的背景？请帮助我。

当我运行该文件时，控制台告诉我:

Uncaught TypeError: flechedroite.addEventListener is not a function

我真的不明白。我是 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]);
    })
}