[DOM] onClick dans une classe

Version imprimable

Bonjour j'ai une classe javascript joueur et une methode toTable pour creer un petit tableau en DOM avec avatar, nom... et differents liens comme "agresser"

Sur ce lien attaquer je veux appeler une fonction ajax en passant l'identifiant du joueur mais ca ne fonctionne pas (pour les tests j'ai juest mis un alert()):
Code:

1 2 3 4 5 6 7 8 9 10 11 var tbl=document.createElement("TABLE"); var td=document.createElement("TD"); td.setAttribute("colSpan","2"); var link=document.createElement("A"); link.setAttribute("onclick",function(){alert(this.IdJoueur);}); link.onclick=function(){alert(this.IdJoueur);} link.appendChild(document.createTextNode("Agresser")); td.appendChild(link);
this.idJoueur est le id du joueur defini dans le constructeur de ma classe.

Qd je click sur mon lien "attaquer" ca me renvoie undefined...

Si qqun a une idee ca serait bien :)
Merci d'avance.

03/10/2008, 12h20
E.Bzz

Bonjour,

Citation:

Envoyé par basson

Bonjour j'ai une classe javascript joueur et une methode toTable pour creer un petit tableau en DOM avec avatar, nom... et differents liens comme "agresser"

Sur ce lien attaquer je veux

Il faudrait toutes les parties du code concerné (HTML + JS) pour pouvoir t'aider.
Par exemple si tu définis la fonction agresser(), mais que tu appelles une fonction attaquer() c'est normal que tu ais ce message.

Mais ça, on ne peut pas le deviner ;)

A+

non de ce cote la pas de soucis je n'appelle pas la mauvaise fonction je fais juste un alert();

En fait le bout de code que j'ai donne se trouve dans ma methode toTable de ma classe joueur.
la methode toTable retourne l'element tbl.

Cette methode est appele depuis une autre fonction javascript qui affiche un tableau dans mon div "vue" pour chaque joueur sur une case.

Code:

document.getElementById("vue").appendChild(listeJoueurs.joueur.getId(i).toTable());

i represente l'id du joueur

extrait de ma methode toTable:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var tr = document.createElement("TR"); var td=document.createElement("TD"); td.setAttribute("style","text-align:center;"); td.setAttribute("width","110px"); td.appendChild(document.createTextNode("id : " + this.idJoueur)); tr.appendChild(td); var tr = document.createElement("TR"); var td=document.createElement("TD"); td.setAttribute("colSpan","2"); var link=document.createElement("A"); link.setAttribute("onclick",function(){alert(this.IdJoueur);}); link.onclick=function(){alert(this.IdJoueur);} link.appendChild(document.createTextNode("Agresser")); td.appendChild(link); tr.appendChild(td);
Dans la 1ere ligne du tableau j'ai bien mon id qui est affiche mais dans la deuxieme ligne j'ai mon lien "Agresser" mais qd je click dessus le alert() renoie undefined a la place de l'id du joueur.

voilou :(

03/10/2008, 13h03
SpaceFrog
Deux choses :
Code:

1 2 link.setAttribute("onclick",function(){alert(this.IdJoueur);}); link.onclick=function(){alert(this.IdJoueur);}
redondant pas besoin de la première ligne ...

ensuite je n'ai pas vu ou tu attribuais le IdJoueur dans la balise ...

bonjour,

utilise une variable temporaire :
Code:

1 2 3 4 var temp = this; link.onclick=function(){alert(temp.IdJoueur);}

03/10/2008, 13h11
basson

ok je supprimerais la 1ere ligne.

Je ne comprends pas ta question ?

link.onclick=function(){alert(this.IdJoueur);}

Mon tableau est bien cree avec le lien. Qd je click sur mon lien je veux que se declenche le alert() avec le idJoueur qui est recuperé lors de la creation de mon tableau HTML depuis la methode toTable...

---edit---
Ca change rien Auteur

Code:

1 2 3 4 var link=document.createElement("A"); link.setAttribute("onclick",function(){alert(this.IdJoueur);}); link.onclick=function(){alert(this.IdJoueur);} link.appendChild(document.createTextNode("Agresser"));
Donc la question de Spaffy :

Citation:

je n'ai pas vu ou tu attribuais le IdJoueur dans la balise ...

!!!

Citation:

---edit---
Ca change rien Auteur

ah ?
Avec cet exemple je n'ai pas de souci :

Code:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
 
<script type="text/javascript">
<!--
var Joueur = function(idJoueur)
{
  this.IdJoueur = idJoueur;
}
 
Joueur.prototype=
{
  ajouteLien : function()
  {
    var link=document.createElement("a");
 
    var temp = this;
    link.onclick=function(){alert(temp.IdJoueur);}
 
    link.appendChild(document.createTextNode("Agresser"));
    document.getElementById("listeJoueurs").appendChild(link);
 
    document.getElementById("listeJoueurs").appendChild(document.createElement("br"));
    document.getElementById("listeJoueurs").appendChild(document.createElement("br"));
  }
}
 
function fonctionTest()
{
  var j1, j2;
  j1 = new Joueur("toto");
  j1.ajouteLien();
 
  j2 = new Joueur("titi");
  j2.ajouteLien();
}
 
//-->
</script>
 
</head>
 
<body onload="fonctionTest()">
 
<div id="listeJoueurs"></div>
 
</body>
 
</html>

quand je clique sur le 1er lien j'ai bien "toto" qui s'affiche, sur le second lien j'ai "titi' qui s'affiche.

Il doit y avoir une erreur dans ton constructeur...

03/10/2008, 13h33
SpaceFrog

ben le this dans l'alert this d'attribut du onclick c'est l'objet qui as le onclick ...

Merci Auteur, j'ai teste ton code et il fonctionne très bien... Mais le mien bug tjs, je pense que ca doit venir de mon tableau d'objets :

le tableau d'objets, ma classe et la fonction de recherche dans le tableau par id :
Code:

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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 var listeJoueurs = {}; listeJoueurs.joueurs = new Array(); listeJoueurs.joueur = function(_idJoueur, _avatar, _pseudo) { this.idJoueur = _idJoueur; this.avatar = _avatar; this.pseudo = _pseudo; //ajoute mon joueur a la liste listeJoueurs.joueurs.push(this); }; listeJoueurs.joueur.prototype = { ajouteLien : function() { var link=document.createElement("a"); var temp = this; link.onclick=function(){alert(temp.IdJoueur);} link.appendChild(document.createTextNode("Agresser")); document.getElementById("vue").appendChild(link); document.getElementById("vue").appendChild(document.createElement("br")); document.getElementById("vue").appendChild(document.createElement("br")); } } listeJoueurs.joueur.getId = function(id) { for (var i = 0; listeJoueurs.joueurs[i]; i++) { if (listeJoueurs.joueurs[i].idJoueur == id) return listeJoueurs.joueurs[i]; } return false; };
Construction de l'objet et appel de ma fonction ajouteLien() :
Code:

1 2 new listeJoueurs.joueur(i, avatar, pseudo); //ajoute l'objet a la liste listeJoueurs.joueur.getId(i).ajouteLien(); //appel la methode
i represnte l'id du joueur (le code au dessus est dans une boucle)

Dans mon HTML j'ai : <div id="vue"></div>

Et qd je click sur mes liens "agresser" mon alert me renvoie toujours undefined !

Voila si tu as une idee de ce qui buuuug.

attention, javascript est sensible à la casse des caractères !

Dans ton constructeur tu as écris :

Code:

1
2
this.idJoueur	= _idJoueur;

et dans la fonction ajouteLien() c'est :

Code:

1
2
3
var temp = this;
link.onclick=function(){alert(temp.IdJoueur);}

la classe Joueur est 1 objet. Le mieux est de créer tous les joueurs en appelant x fois ton constructeur :

Code:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
 
<script type="text/javascript">
<!--
var Joueur = function(_idJoueur, _avatar, _pseudo)
{
                this.idJoueur   = _idJoueur;
                this.avatar             = _avatar;
                this.pseudo             = _pseudo;
}
 
Joueur.prototype=
{
  ajouteLien : function()
  {
    var link=document.createElement("a");
 
    var temp = this;
    link.onclick=function(){alert(temp.idJoueur);}
    
    link.appendChild(document.createTextNode("Agresser"));
    document.getElementById("listeJoueurs").appendChild(link);
    
    document.getElementById("listeJoueurs").appendChild(document.createElement("br"));
    document.getElementById("listeJoueurs").appendChild(document.createElement("br"));
  }
  , 
  getId : function()
  {
    return this.idJoueur;
  }
}
 
function fonctionTest()
{
  var tabJoueurs = new Array(); 
  var i;
  
  // création des joueurs (ici on crée 5 joueurs):
  for (i=0; i<5; i++)
  {
    // joueur i :
    tabJoueurs[i] = new Joueur("id_"+i, "avatar_"+i, "pseudo_"+i);
    // ajout des liens dans la page :
    tabJoueurs[i].ajouteLien();
  }
  
 
  var str="Id des joueurs créés : ";
  // on récupère les id des joueurs
  for (i = 0; i<tabJoueurs.length; i++)
        {
                        str = str + tabJoueurs[i].getId()+" ; ";
        }
  alert(str);
 
}
 
//-->
</script>
 
</head>
 
<body onload="fonctionTest()">
 
<div id="listeJoueurs"></div>
 
 
</body>
 
</html>

06/10/2008, 09h29
basson

ouinnnn, Auteur merci beaucoup...
C'etait bien ca mon idJoueur avec la majuscule ! Et avec la variable temp ca marche parfaitement !

:mrgreen: