Discussion :

[Romain672]

Bonjour,
J'ai <div id="conteneurcarte"></div> dans mon html.
J'ai une variable globale "let startnumbercards = 5;" dans mon javascript.
Ce code me permet de rajouter dans cette div, d'autres divs "<div id='carteX' class='carte'>aa</div>" à l'intérieur, et un nombre égal à ma variable:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
let startnumbercards = 5;
 
window.addEventListener("load", createcards);
function createcards(){
    for (let i=0;i<startnumbercards;i++){
 
        //Methode 1:
        let listcards = [];
        listcards[i] = "<div id='carte" + [i+1] + "' class='carte'>aa</div>";
        document.getElementById("conteneurcarte").insertAdjacentHTML("beforeend", listcards[i]);
 
        /*
        //Methode 2:
        var newdiv = document.createElement('div');
        newdiv.id = 'carte' + [i+1];
        newdiv.className = 'carte';
        newdiv.innerHTML = 'aa';
        document.getElementById("conteneurcarte").appendChild(newdiv);
        */
    }
}
 
 
document.getElementById("carte1").addEventListener("click", dosomething);
function dosomething() {
    console.log("yay");
}

Mais le addEventListener pose problème, quand je fais appel à lui vu que la div n'existe pas initialement, il m'envoie le message

Uncaught TypeError: document.getElementById(...) is null

Est-ce possible? Merci.

[mathieu]

vous pouvez faire cela en créant un objet Element comme cela

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
const carte = document.createElement("div");
carte.addEventListener("click", ...);
 
// ajout du contenu
carte["textContent"] = "bla bla;"
 
// ajout d'une classe css
carte.setAttribute("class", "carte");
 
 
// et plus tard vous insérez cette élément dans le contenu html
document.getElementById("conteneurcarte").insertAdjacentElement("beforeend", carte);

regardez là pour plus d'informations sur l'objet Element
https://developer.mozilla.org/fr/docs/Web/API/Element

[Romain672]

Oh je viens de comprendre mon problème via votre code.
Je pensais que le "addEventListener" devait être à l'extérieur des fonctions, alors qu'il peut être mis dedans.

Du coup rien qu'en déplaçant une ligne de mon code ça marche. (ligne 24 à ligne 11)
Merci