Discussion :

[Guybrush113]

Bonjour a toutes et a tous,

Voila mon problème :
Je suis en train de crée une interface de VOD. Quand on passe sur une jaquette le nom du film s'affiche en bas de l'écran.
J'ai donc attaché 2 événement :
- Le premier avec lequel j'ai aucun souci (click) l'id du film qui est aussi l'id de l'img est transmit a la fonction descriptionFilm
- Le deuxième avec lequel je bute depuis trop longtemps... (focus)
Le problème de cette événement réside dans la boucle for, car le titre associé au 'n' film sera le dernier titre de ma boucle!


Le Code élagué:

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
var me = this;
nbFilm = me.xhr.responseXML.documentElement.childNodes.length;
film = me.xhr.responseXML.documentElement.getElementsByTagName("film");
for (var i=0;i<nbFilm;i++){
     id = film[i].getElementsByTagName("vod_id")[0].firstChild.nodeValue;
     titre = film[i].getElementsByTagName("vod_titre")[0].firstChild.nodeValue;
     image =film[i].getElementsByTagName("vod_image")[0].firstChild.nodeValue;
 
     img = document.createElement("img");
     img.setAttribute("id",id);
     img.setAttribute("src","../../../common/img_vod/"+image);
     img.addEventListener("click",function{me.descriptionFilm(id)},false);
     img.addEventListener("blur",function{document.getElementById("menuTitre").innerHTML ="";},false);
     img.addEventListener("focus",function{document.getElementById('menuTitre').innerHTML = '<h2>'+titre+'</h2>';},false);
 
   document.getElementById("menuMosaique").appendChild(appendChild(img));                
}

Merci d'avance

[franculo_caoulene]

Salut,

Ça t'aidera peut-être : http://www.developpez.net/forums/d66...-bouton-radio/

[Guybrush113]

Merci pour ta réponse rapide. Mais je ne voix aucune similarité entre nos deux problème. Je développe le javascript aussi en class avec un prototypage du style :

Code :

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

1
2
3
4
function Menu(){
}
Menu.prototype.mosaique = function(){
}

Mais mon seul problème n'est pas le contexte de mes fonction mais celui de la boucle for!! Comme si il mettait de coté les addEventListener et qu'il les fraient a la fin de la boucle. Ce qui ce traduirai par attaché les evenements avec la même variable titre qui serai la dernière de la boucle. Je sais pas si ce raisonnement est correct. Alors je vais essayé de récupéré la variable dans un tableau. Ce qui me permettra de conservé toute les valeur de la boucle.

J'ai vue que s'était possible de le faire a partir du DOM 0 avec innerHTML
EXE

Code :

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

1
2
3
4
5
6
7
8
 
jaquette.innerHTML="<img
onFocus=\"
document.getElementById('film').innerHTML = '<img src="+image+" >';
document.getElementById('titre').innerHTML = '<h2>"+titre+"</h2>';\"
onBlur=\"
document.getElementById('titre').innerHTML = "";\"
src='"+image+"' />";

Mais étant sur un système embarqué j'aurai aimé passé par des fonctions du DOM 2 (pour suivre les recommandations du browser ANT software)

Merci pour toute réponse pertinente
Cordialement

[Bovino]

Peut-être une explication dans la FAQ ?
Ceci dit, cela aussi me laisse perplexe :

l'id du film qui est aussi l'id de l'img

est-ce à dire que plusieurs éléments ont le même id ???

[Guybrush113]

Yeah merci bovino . Et Effectivement ma réponse était bien dans les FAQ désolé j'ai vraiment pas l'habitude des forums.

Alors pour synthétise :

l'id du film qui est aussi l'id de l'img => l'id du film dans ma base de donnée est le même que l'id de l'élément img en HTML ce qui me permet de gardé le lien du film (désole je m'était un peu mal exprimer).

L'événement focus fonctionné car l'id fessai référence a l'id de l'élément au qu'elle on attache l'event (img).
Donc il faut enregistrer les variables dans les propriétés de l'élément pour pouvoir y faire référence dans l'événement focus :

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
var me = this;
nbFilm = me.xhr.responseXML.documentElement.childNodes.length;
film = me.xhr.responseXML.documentElement.getElementsByTagName("film");
for (var i=0;i<nbFilm;i++){
     img = document.createElement("img");
     img.id = film[i].getElementsByTagName("vod_id")[0].firstChild.nodeValue;
     img.titre = film[i].getElementsByTagName("vod_titre")[0].firstChild.nodeValue;
     img.image =film[i].getElementsByTagName("vod_image")[0].firstChild.nodeValue;
 
 
     img.setAttribute("id",img.id);
     img.setAttribute("src","../../../common/img_vod/"+img.image);
     img.addEventListener("click",function{me.descriptionFilm(this.id)},false);
     img.addEventListener("blur",function{document.getElementById("menuTitre").innerHTML ="";},false);
     img.addEventListener("focus",function{document.getElementById('menuTitre').innerHTML = '<h2>'+this.titre+'</h2>';},false);
 
   document.getElementById("menuMosaique").appendChild(appendChild(img));                
}