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>