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

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