javascript objet et onclick

**eiffel59300** · 14/05/2009, 11h50

Salut,

Voici mon problème : A l'intérieur d'une classe javascript, je cherche à assigner une méthode de cette classe sur l'onclick d'un div créé dynamiquement à l'intérieur de cette classe.

Voici un exemple de code pour illustrer mon propos :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .BLOCACTIF{
        width:50px;
        height:20px;
        background-color:rgb(180,180,180);
        cursor:pointer;
    }
    .BLOCPASSIF{
        width:50px;
        height:20px;
        background-color:rgb(255,255,255);
    }
    </style>
    <script type="text/javascript">
 
    function bloc(){
 
        this.cpt=1;
 
        this.creerBloc=function(container){
 
            var oldBloc=document.getElementById(container);
 
            var bID="BLOC"+this.cpt;
            var newBloc=document.createElement("DIV");
            newBloc.innerHTML="bloc "+this.cpt;
            newBloc.id=bID;
            newBloc.className="BLOCACTIF";
            newBloc.onclick=function(){ this.creerBloc(bID);}; //ici appel à la methode creerBloc sur le nouveau div
 
            oldBloc.appendChild(newBloc);
            oldBloc.className="BLOCPASSIF";
            oldBloc.onclick=function(){ return;};
            this.cpt++;
 
        }
 
    }
 
    var testBloc=new bloc();
 
    </script>
</head>
<body onLoad="testBloc.creerBloc('BLOC')">
     <div id="BLOC">
    </div>
</body>
</html>

Lorsque je clique sur le div créé, la console d'erreur me renvoit : this.creerBloc is not a function.

A contrario la même chose réalisée d'une façon procédurale ne pose pas de problème

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .BLOCACTIF{
        width:50px;
        height:20px;
        background-color:rgb(180,180,180);
        cursor:pointer;
    }
    .BLOCPASSIF{
        width:50px;
        height:20px;
        background-color:rgb(255,255,255);
    }
    </style>
    <script type="text/javascript">
    var cpt=1;
 
    function creerBloc(container){
 
        var oldBloc=document.getElementById(container);
 
        var bID="BLOC"+cpt;
        var newBloc=document.createElement("DIV");
        newBloc.innerHTML="bloc "+cpt;
        newBloc.id=bID;
        newBloc.className="BLOCACTIF";
        newBloc.onclick=function(){ creerBloc(bID);};
 
        oldBloc.appendChild(newBloc);
        oldBloc.className="BLOCPASSIF";
        oldBloc.onclick=function(){ return;};
        cpt++;
 
    }
 
    </script>
</head>
<body onLoad="creerBloc('BLOC')">
     <div id="BLOC">
    </div>
</body>
</html>

**bigboomshakala** · 14/05/2009, 13h04

hello,

erreur classique d'utilisation de this. tu n'es pas dans le bon contexte donc ça n'a pas l'effet escompté

Code :

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

newBloc.onclick=function(){ this.creerBloc(bID);};

devient

Code :

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

1
2
var obj = this;
newBloc.onclick=function(){ obj.creerBloc(bID);};

**franculo_caoulene** · 14/05/2009, 13h05

Salut,

C'est un problème de contexte, this fait référence au div et non à bloc.
La correction :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .BLOCACTIF{
        width:50px;
        height:20px;
        background-color:rgb(180,180,180);
        cursor:pointer;
    }
    .BLOCPASSIF{
        width:50px;
        height:20px;
        background-color:rgb(255,255,255);
    }
    </style>
    <script type="text/javascript">
 
    function bloc(){
 
        this.cpt=1;
 
        this.creerBloc=function(container){
            var me = this;
            var oldBloc=document.getElementById(container);
            var bID="BLOC"+this.cpt;
            var newBloc=document.createElement("DIV");
            newBloc.innerHTML="bloc "+this.cpt;
            newBloc.id=bID;
            newBloc.className="BLOCACTIF";
            newBloc.onclick=function(){ alert(this);me.creerBloc(bID);}; //ici appel à la methode creerBloc sur le nouveau div
 
            oldBloc.appendChild(newBloc);
            oldBloc.className="BLOCPASSIF";
            oldBloc.onclick=function(){ return;};
            this.cpt++;
 
        }
 
    }
 
    var testBloc=new bloc();
 
    </script>
</head>
<body onLoad="testBloc.creerBloc('BLOC')">
     <div id="BLOC">
    </div>
</body>
</html>

**eiffel59300** · 14/05/2009, 14h41

Super, merci beaucoup !!!

Je ne suis pas surpris, je me doutais bien qu'il y avait un problème de contexte, mais je ne voyais pas du tout comment le résoudre, votre réponse va vraiment bien m'aider.

javascript objet et onclick

JavaScript

Discussions similaires

Partager

Partager