[POO] Tester la sélection d'un bouton radio

Version imprimable

Salut,

Avant toute chose, oui j'ai lu la FAQ et ça fonctionne. Enfin, pas tout le temps!

Voici le script réduit au minimum, mais en gardant ma logique objet de départ:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
   <title>test d'un radio</title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   
   </style>
</head>
<body>
   <form id="f1" action="" method="post">
      <label for="r1">r1</label><input id="r1" name="r" type="radio" value="1" />
      <label for="r2">r2</label><input id="r2" name="r" type="radio" value="2" />
      <label for="r3">r3</label><input id="r3" name="r" type="radio" value="3" />
   </form>
   <script type="text/javascript">
   var Utils = {
      Evenement: {
         ajouter: function(elm, evt, fn) {
            if (document.addEventListener) {
               if (elm.length === undefined) {
                  elm.addEventListener(evt, function(e) {
                     fn(e)
                  }, false);
               } else {
                  for (var i = 0, imax = elm.length; i < imax; i++) {
                     elm[i].addEventListener(evt, function(e) {
                        fn(e)
                     }, false);
                  }
               }
            } else if (document.attachEvent) {
                if (elm.length === undefined) {
                    elm.attachEvent("on" + evt, fn);
                } else {
                    for (var i = 0, imax = elm.length; i < imax; i++) {
                        elm[i].attachEvent("on" + evt, fn);
                    }
                }
            }
         }
      },
      Filtre: {
         r: function() {
            var r;
            var elms = document.getElementsByName("r");
            for (var i=0,imax=elms.length; i<imax; i++) {
               if (elms[i].checked) {  //----- condition fautive?
                  r = elms[i].value;
               }
            }
            return r;
         }()
      }
   }
   
   Utils.Evenement.ajouter(document, "click", function(e) {
      var elm = e.target || event.srcElement;
      if (elm.name=="r") {
         alert(Utils.Filtre.r);        //----- alerte affichant undefined
         var r;
         var elms = document.getElementsByName("r");
         for (var i=0,imax=elms.length; i<imax; i++) {
            if (elms[i].checked) {
               r = elms[i].value;
            }
         }
         alert(r);                     //----- alerte affichant la valeur du bouton radio
      }
   });
   </script>
</body>
</html>

Le script suivant affiche deux alertes. La première est censée afficher la valeur du bouton radio coché en appelant un objet. La seconde affiche bien la valeur du bouton radio coché en utilisant le même script que pour la première, mais cette fois-ci extrait de l'objet.
Curieusement, dans le script contenu dans l'objet la condition if (elms[i].checked) (l.48) n'est apparemment jamais vraie! Si je retire cette instruction et que je concatène les valeurs, j'obtiens un résultat cohérent (undefined123).

Auriez-vous une explication à cela?

Merci par avance.

Bon en fait j'invoquais directement Utils.Filtre.r à cause des parenthèses en fin de méthode. Elle était donc exécutée directement au chargement de la page et c'est tout.

En faisant de Utils.Filtre.r une simple fonction ça fonctionne correctement.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
   <title>test d'un radio</title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   
   </style>
</head>
<body>
   <form id="f1" action="" method="post">
      <label for="r1">r1</label><input id="r1" name="r" type="radio" value="1" />
      <label for="r2">r2</label><input id="r2" name="r" type="radio" value="2" />
      <label for="r3">r3</label><input id="r3" name="r" type="radio" value="3" />
   </form>
   <script type="text/javascript">
   var Utils = {
      Evenement: {
         ajouter: function(elm, evt, fn) {
            if (document.addEventListener) {
               if (elm.length === undefined) {
                  elm.addEventListener(evt, function(e) {
                     fn(e)
                  }, false);
               } else {
                  for (var i = 0, imax = elm.length; i < imax; i++) {
                     elm[i].addEventListener(evt, function(e) {
                        fn(e)
                     }, false);
                  }
               }
            } else if (document.attachEvent) {
                if (elm.length === undefined) {
                    elm.attachEvent("on" + evt, fn);
                } else {
                    for (var i=0, imax=elm.length; i < imax; i++) {
                        elm[i].attachEvent("on" + evt, fn);
                    }
                }
            }
         }
      },
      Filtre: {
         r: function() {
            var r;
            var elms = document.getElementsByName("r");
            for (var i=0,imax=elms.length; i<imax; i++) {
               if (elms[i].checked) {  //----- condition fautive?
                  r = +elms[i].value;
               }
            }
            return r;
         }
      }
   }
   
   Utils.Evenement.ajouter(document, "click", function(e) {
      var elm = e.target || event.srcElement;
      if (elm.name=="r") {
         alert(Utils.Filtre.r());        //----- alerte affichant undefined
         var r;
         var elms = document.getElementsByName("r");
         for (var i=0,imax=elms.length; i<imax; i++) {
            if (elms[i].checked) {
               r = elms[i].value;
            }
         }
         alert(r);                     //----- alerte affichant la valeur du bouton radio
      }
   });
   </script>
</body>
</html>

Dernier message pour dire que c'est une histoire de contexte.
La première façon de faire exécute la méthode à l'affichage de la page et garde ce contexte.
La deuxième façon de faire obtient l'état du formulaire au moment du clique, mais retourne une fonction plutôt qu'un objet typé (Number ou String). Or je cherche à avoir un objet à un instant T.

Pour ça, il faut faire de Filtre un constructeur et l'invoquer dès sa création (les parenthèses après l'accolade de fin de fonction).

Voici ce que ça donne :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
   <title>test d'un radio</title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   
   </style>
</head>
<body>
   <form id="f1" action="" method="post">
      <label for="r1">r1</label><input id="r1" name="r" type="radio" value="1" />
      <label for="r2">r2</label><input id="r2" name="r" type="radio" value="2" />
      <label for="r3">r3</label><input id="r3" name="r" type="radio" value="3" />
      <label for="t">t</label><input id="t" name="t" type="text" value="test" />
   </form>
   <script type="text/javascript">
   var Utils = {
      Evenement: {
         ajouter: function(elm, evt, fn) {
            if (document.addEventListener) {
               if (elm.length === undefined) {
                  elm.addEventListener(evt, function(e) {
                     fn(e)
                  }, false);
               } else {
                  for (var i = 0, imax = elm.length; i < imax; i++) {
                     elm[i].addEventListener(evt, function(e) {
                        fn(e)
                     }, false);
                  }
               }
            } else if (document.attachEvent) {
                if (elm.length === undefined) {
                    elm.attachEvent("on" + evt, fn);
                } else {
                    for (var i=0, imax=elm.length; i < imax; i++) {
                        elm[i].attachEvent("on" + evt, fn);
                    }
                }
            }
         }
      },
      Filtre: function() {
         this.r = function() {
            var r;
            var elms = document.getElementsByName("r");
            for (var i=0,imax=elms.length; i<imax; i++) {
               if (elms[i].checked) {
                  r = +elms[i].value;
               }
            }
            return r;
         }();
         this.t = document.getElementById("t").value;
      }
   }
   
   Utils.Evenement.ajouter(document, "click", function(e) {
      var elm = e.target || event.srcElement;
      if (elm.name=="r") {
         var f = new Utils.Filtre;
         alert(f.r +' - '+ f.t);
      }
   });
   </script>
</body>
</html>

Je pense que tout ceci est intéressant, mais je me trompe peut-être.