Discussion :

[touvenant]

Bonjour,
j'ai une page avec une div id=A et une div id=B;
dans la div id = A, j'ai un événement onClick qui lance une fonction pour changer le contenu de la div A par un innerHTML;
Ce innerHTML crée dans la div A une div id=C (jusqu'ici ça fonctionne);
cette div C contient un événement onMouseOver qui lance une fonction pour changer le style de la div B;
le sélecteur de cette fonction ne marche pas et ne reconnais pas l'id B;
Je suis pourtant toujours dans la même page qu'au départ...
Est-ce que le fait d'avoir changé le contenu d'une div de la page fait "perdre" les autres éléments DOM de la page pour les sélecteurs javascript exécutés par des éléments créés par le innerHTML ?

Code html :

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

1
2
<div id="A" onClick="rajoutedivB()">c est du A</div>
<div id="B">c est du B</div><!--ici c'est du B est affiché en rouge-->

Code :

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

1
2
3
4
5
6
rajoutedivC(){
document.getElementById(A).innerHTML = "<div id=\"C\" onMouseOver=\"changeStyleB('B')\">c est du C</div>";
}
changeStyleB(B){
document.getElementById(B).style.color = 'red';//ici "c est du B" devrait prendre la couleur rouge lorsqu'on passe sur "c est du C"
}

le message d'erreur :

TypeError: document.getElementById(...) is null ligne 8

Est-ce que l'un d'entre vous a déjà rencontré ça ?

[Bovino]

Code :

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

onClick="rajoutedivB()"

Code :

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

rajoutedivC()

Comme je dis souvent : si tu appelles ta femme avec le prénom d'une autre, il y a peu de chances pour que ça se passe comme tu l'aurais souhaité !

Ensuite, renseigne-toi aussi sur la façon de définir une fonction en JavaScript !

[touvenant]

Bonjour Bovino,

Eh oui, tu as raison, au sujet du prénom de ma femme, c'est très drôle.
Je me suis effectivement trompé en recopiant mon code.
Mais comme je l'ai précisé, mon innerHTML me construit bien la div C dans la div B quand je clique sur la div A.
Je n'ai pas commis les erreurs dans l'original.
C'est à dire que j'ai bien utilisé rajoutedivC() dans les deux cas. D'autre part, j'ai bien défini mes fonction avec function
Mais je te félicite pour ton sens de l'observation, et je te remercie du temps que tu consacres à mon problème.
voici le code sans ces erreurs (code qui ne fonctionne quand même pas).

Code html :

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

1
2
<div id="A" onClick="rajoutedivC()">c est du A</div>
<div id="B">c est du B</div><!--ici c'est du B est affiché en rouge-->

le javascript

Code :

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

1
2
3
4
5
6
function rajoutedivC(){
    document.getElementById(A).innerHTML = "<div id=\"C\" onMouseOver=\"changeStyleB('B')\">c est du C</div>";
}
function changeStyleB(B){
    document.getElementById(B).style.color = 'green';//ici "c est du B" devrait prendre la couleur verte lorsqu'on passe sur "c est du C" c'est cette ligne qui est concernée par le code d'erreur.
}

[Bovino]

Code :

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

document.getElementById(A)

Ici, tu cherches l'élément dont l'identifiant est celui correspondant à la variable A. Cette variable n'existant pas, cela génère une erreur.
Erreur que tu aurais pu détecter facilement en utilisant la console de débogage (F12 dans le navigateur).

http://codepen.io/bovino/pen/GEpqi

[touvenant]

grrr, je m'en veux !
bravo Bovino, rien ne t'échappe !
mais une fois de plus je me suis trompé en recopiant.
ce n'est pas document.getElementById(A) que j'ai codé mais document.getElementById("A")
même chose pour document.getElementById(B), j'ai codé document.getElementById("B")
du reste ça ne pourrait pas fonctionner...
Or, je le précise à nouveau : ça fonctionne jusqu'à la création de la div C dans la div A !!! c'est après que sa mère doit !

[Bovino]

Je ne suis pas sûr de bien comprendre où se situe le problème exactement...

En tout cas, le code fonctionne tel quel, mais il est un peu maladroit...
Tu demandes que quand on clique sur A, son contenu devienne C et que lorsqu'on survole C, B devienne vert.
Sauf que du coup, quand on clique sur A, A devient C et de facto, on survole déjà C ce qui fait que B devient immédiatement vert...

Une variante :
http://codepen.io/bovino/pen/GEpqi

[touvenant]

Merci beaucoup Bovino,
oui c'était exactement ça que je voulais faire.
En réalité dans mon code, la div B était créée en même temps que la div C avec le innerHTML.
Comme il me fallait avancer, je me suis débrouillé autrement.
Je pensais que ça ne marchait pas à cause du innerHTML qui aurait eu le même effet qu'un changement de page...
Mais je constate que non.
Je ne saurais pas que'st-ce qui ne fonctionnait pas dans mon code mais je sais que ce n'était pas à cause du innerHTML.
Donc merci, je peux marquer comme résolu.