Javascript 我不知道'；为什么我的背景图片不'；行不通

为什么我的旗帜没有改变她的背景？请帮帮我

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

未捕获类型错误：flechedroite.addEventListener不是函数

我真的不明白。我是Javascript的初学者，因此请用友好的语言向我解释如何修复此错误：）

var flechedroite=document.getElementsByClassName（'fa-arrow-right'）；
var flechegauche=document.getElementsByClassName（'switch-left'）；
var banner=document.getElementById（'banner'）；
var图像=[]；
var changeBackground=函数（bElement，bUrl）{
返回bElement.style.backgroundImage=“url（“+bUrl+”）；
}
//图像列表
images[0]=“images/image1.jpg”；
images[1]=“images/image2.jpg”；
images[2]=“images/image3.jpg”；
flechedroite.addEventListener（'click'，function（）{
对于（var i=0；i

函数getElementsByCassName返回一个HTMLCollection，它是一个类似数组的结构，可以包含多个元素。因此，您需要使用索引来访问其中包含的元素

因此，flechedroite.addEventListener会导致错误，但flechedroite[0]。addEventListener应该可以工作

---

如果您使用“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');
           });
        }

var-flechedroite=document.getElementsByClassName（'fa-fa箭头右侧'）；
//flechedroite包含所有具有“fa-fa-arrow-right”类的元素
//在每个元素上，必须添加“addEventListener”
对于（变量i=0；i

基本示例

更高级的例子

应在窗口中调用addEventListener。onload或在$（document.ready（）

由于getElementsByClassName返回数组，因此需要将数组索引与flechedroite一起使用来添加事件侦听器。例如，flechedroite[0]。addEventListener（'click'，function（）{…}）；

在循环中调用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]);
    })
}

---

在脚本运行时没有类元素

'fa-arrow-right'

共享您的代码。您也可以共享您的HTML代码吗？该类出现在我的HTML代码中：（.您所说的“在脚本运行时”是什么意思您正在尝试将事件侦听器添加到集合而不是元素。请查看。我已完成更改，但现在错误为“Uncaught TypeError:无法读取undefined的属性'addEventListener'”你确定你的html中存在一个类为“fa arrow right”的元素，并且JavaScript只有在html加载完成后才会执行吗？哦，我把脚本放在head元素的末尾，这就是为什么它不起作用的原因。你说得对，非常感谢！这正是我想要做的。谢谢你，我很感激，但我没有预料到为了得到一个完整的更正。现在我只需要了解你做了什么使它工作！谢谢

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]);
    })
}