Discussion :

[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 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 :

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

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.

[E.Bzz]

Bonjour,

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+

[basson]

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 :

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

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

i represente l'id du joueur


extrait de ma methode toTable:

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 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

[SpaceFrog]

Deux choses :

Code :

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

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 ...

[Auteur]

bonjour,

utilise une variable temporaire :

Code :

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

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

[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

[Bovino]

Code :

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

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 :

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

!!!

[Auteur]

---edit---
Ca change rien Auteur

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

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
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...

[SpaceFrog]

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

[basson]

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 :

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
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 :

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

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.

[Auteur]

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

Dans ton constructeur tu as écris :

Code :

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

1
2
this.idJoueur	= _idJoueur;

et dans la fonction ajouteLien() c'est :

Code :

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

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 html :

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
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>

[basson]

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