Я не знаю, почему мой backgroundImage не работает

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

если вы используете '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

Answer 2

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 3

Функция getElementsByClassName возвращает HTMLCollection, представляющую собой структуру в виде массива, которая может содержать несколько элементов.Поэтому вам нужно использовать индекс для доступа к содержащимся в нем элементам.

Так что flechedroite.addEventListener приводит к ошибке, но flechedroite [0] .addEventListener должен работать

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