I don't how why my backgroundImage doesn't work

Question

Why does my banner doesn't change her background? Please help me.

When I run the file the console tells me:

Uncaught TypeError: flechedroite.addEventListener is not a function

I really don't understand. I'm a beginner in Javascript so please explain me with kind words how I can fix this error :)

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

There are no elements of the class `'fa-arrow-right'` at the time the script runs — Luca Kiebel, Aug 24 '18 at 09:44
This class appears in my html code :(. What do you mean by " at the time the script runs" — Wardy, Aug 24 '18 at 09:46
you are trying to add an event listener to a collection instead of an element take a look at [AddEventLister on class](https://stackoverflow.com/a/19655662/2417602). — vikscool, Aug 24 '18 at 09:52

score 1 · Accepted Answer · answered Aug 24 '18 at 10:16

addEventListener should be called in window.onload or in $(document).ready()
Since getElementsByClassName returns an array, you need to use array index with flechedroite to add an event listener. i.e. flechedroite[0].addEventListener('click', function() {...});
You are calling changeBackground function in a loop to set the background image, effectively you will see only the last image from the array being set as background.

JS Code

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

That's exactly what I wanted to do thank you I appreciate it but I didn't expect to get a full correction. Nevermind now I just need to understand what you did to make it work ! Thanks — Wardy, Aug 24 '18 at 10:26

score 0 · Answer 2 · answered Aug 24 '18 at 09:46

0

The function getElementsByClassName returns a HTMLCollection, which is an array like structure that can contain multiple elements. So you need to use an index to access the elements contained in it.

So flechedroite.addEventListener results in an error but flechedroite[0].addEventListener should work

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

answered Aug 24 '18 at 09:46

I've done the changes but now the error is "Uncaught TypeError: Cannot read property 'addEventListener' of undefined" – Wardy Aug 24 '18 at 09:59
Are you sure that an element with the class 'fa-arrow-right' exists in your html and that the JavaScript is only executed after the html has finished loading? – Aug 24 '18 at 10:01
Oh I put the script at the end of the head element that's why it didn't work you are right thank you so much ! – Wardy Aug 24 '18 at 10:05

Leo · Answer 3 · 2018-08-24T10:21:58.017

if you use 'getElementsByClassName' and you want to add an 'addEventListener', you can not do it in a 'generic' way: "flechedroite.addEventListener ('click', function () {}". You have to do this for each element:

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

basic example JSFiddle1

a more advanced example JSFiddle2

I don't how why my backgroundImage doesn't work

3 Answers3