JavaScript Events not adding to the DOM

Question

As an exercise I have to do a little online bike reservation app. This app begins with a header which explains how to use the service. I wanted this tutorial be optional so I wrote a welcome message in HTML and if the user doesn't have a var in his cookies saying he doesn't want to see the tutorial again, the welcome message is replaced by a slider that displays the information.

To achieve that is fetch a JSON file with all the elements I need to build the slider (three divs : the left one with an arrow image inside, the central one where the explanations occur and the right one with another arrow). Furthermore I want to put "click" events on the arrows to display next or previous slide. However, when I do so, only the right arrow event works. I thought of a closure problem since it is the last element to be added to the DOM that keeps its event but tried many things without success. I also tried to add another event to the div that works ("keypress") but only the click seems to work. Can you look at my code give me an hint on what is going on?

Here is the init function of my controller:

init: function() {
    var load = this.getCookie();
    if(load[0] === ""){
        viewHeader.clearCode();
        var diapoData = ServiceModule.loadDiapoData("http://localhost/javascript-web-srv/data/diaporama.json");
        diapoData.then(
            (data) => {
                // JSON conversion
                modelDiapo.init(data);           
                // translation into html
                controller.initElementHeader(modelDiapo.diapoElt[0]);
                controller.hideTuto();
            }, (error) => {
                console.log('Promise rejected.');
                console.log(error);
            });
    } else {
        viewHeader.hideButton();
        controller.relaunchTuto();
    }
}

There is a closer look at my function translating the JSON elements into HTML and adding events if needed :

initElementHeader: function(data){
    data.forEach(element => {
        // Creation of the new html element
        let newElement = new modelHeader(element);
        // render the DOM
        viewHeader.init(newElement);
    });
}

NewElement is a class creating all I need to insert the HTML, viewHeader.init() updates the DOM with those elements and add events to them if needed.

init: function(objetElt){
    // call the render
    this.render(objetElt.parentElt, objetElt.element);
    // add events
    this.addEvent(objetElt);
},

Finally the addEvent function:

addEvent: function(objet){
    if(objet.id === "image_fleche_gauche"){
        let domEventElt = document.getElementById(objet.id);
        domEventElt.addEventListener("click", function(){
            // do things
        });
    }
    else if(objet.id === "image_fleche_droite"){
        let domEventElt = document.getElementById(objet.id);
        domEventElt.addEventListener("click", function(){
            // do stuff
        });
    };
},

I hope being clear enough about my problem. Thank You.

Answer 1

Ok, I found the problem, even if the element was actually created, it somehow stayed in the virtual DOM for some time, when the "getElementById" in "addEvent" was looking for it in the real DOM it didn't find the target and couldn't add the event. This problem didn't occur for the last element since there was nothing else buffering in the virtual DOM.

On conclusion I took out the function adding events out of the forEach loop and created another one after the DOM is updated to add my events.