onClick qui ne s'applique pas

Version imprimable

Bonjour,

J'ai crée une fonctiion JS tres simple :

Code:

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
function update_modif()
{
  modif=document.getElementById("Modification");
  if(document.getElementById("modif_oui").checked) {
    modif.style.display="block";
  } else {
    modif.style.display="none";
  }
}
</script>

Normalement si je clique sur ma radio OUI le div avec ID=Modification drvrait s'afficher! Or il reste toujours visible meme quand NON est coché. Voila mon code HTML :

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
<div> Email :                                                                                                                                                                          
            </div>                                  
            <div id="Modification">                                 
              <label for="login"> Nouveau Email                                                                                                                                                                                                                                                                                                                                                       
              </label>                                                                                                                                                                                                                                                                                                                                                          
              <input type="text" name="email" />                                            
            </div>                <br />                                                                                                                                                      
            <div> Mot de passe :                                                                                                                                                
            </div>                                                       
            <div id="Modification">                                                         
              <div>                                                  
                <label for="login"> Nouveau mot de passe                                                                                                                                                                                                                                                                                                                                                         
                </label>                                                                                                                                                                                                                                                                                                                                                            
                <input type="text" name="mdp" />                                              
              </div>                             
              <div>                                                                    
                <label for="login"> Confirmer votre nouveau mot de passe                                                                                                                                                                                                                                                                                                                                                         
                </label>                                                                                                                                                                                                                                                                                                                                                            
                <input type="text" name="mdp" />                             
              </div>                         
            </div>                    <br />                                                        
            <div> Nombre d'annonces :                                                         
            </div><br />                                                                                                                                                
            </fieldset>                  
            <label for=""> Voulez-vous modifier vos infos ?                                                                                                                                                                                                                                                                                                                                                         
            </label>                                                                                              
            <input type="radio" name="modif" id="modif_oui" onClick="update_modif()"> Oui                   
            <input type="radio" name="modif" id="modif_non" onClick="update_modif()"   checked="checked"> Non

Merci d'avance

04/06/2009, 14h21
Alexdezark

Salut,

J'ai juste regardé ton script vite fait, mais il y a 2 div avec l'id "modification".

Donc ça déjà c'est suffisant pour que ça ne marche pas.

@+

PS : utilise la console d'erreurs de Firefox, je pense que ce genre d'erreur te serait signalée ;)
04/06/2009, 14h23
Bovino
Attention !
Il me semble que le onclick est déclenché avant la modification effective de l'état, donc quand tu cliques, ce n'est pas le bon radio qui est coché.
Tu peux t'en rendre compte en plaçant un alert dans le onclick.

L'astuce serait de passer directement l'id à la fonction :

Code:

onClick="update_modif(this.id)

et de modifier ta fonction :
Code:

1 2 3 4 5 6 7 8 9 function update_modif(etat) { modif=document.getElementById("Modification"); if(etat=='modif_oui') { modif.style.display="block"; } else { modif.style.display="none"; } }

Voila mon code maintenant :

Code:

1
2
3
4
5
6
7
8
9
10
function update_modif(etat)
{
  modif=document.getElementById("Modification");
  if(etat=='modif_oui') {
    modif.style.display="block";
  } else {
    modif.style.display="none";
  }
}
</script>

Et :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="Modification">                                                                        
              <div>                                                                   
                <label for="mpassword"> Nouveau mot de passe                                                                                                                                                                                                                                                                                                                                                                          
                </label>                                                                                                                                                                                                                                                                                                                                                                             
                <input type="text" name="password" />                                                             
              </div>                                            
              <div>                                                                                     
                <label for="password2"> Confirmer votre nouveau mot de passe                                                                                                                                                                                                                                                                                                                                                                          
                </label>                                                                                                                                                                                                                                                                                                                                                                             
                <input type="text" name="password2" />                                            
              </div>                                      
            </div>                    <br />                                                                     
            <div> Nombre d'annonces :                                                                      
            </div><br />                                                                                                                                                             
            </fieldset>                               
            <label for=""> Voulez-vous modifier vos infos ?                                                                                                                                                                                                                                                                                                                                                                      
            </label>                                                                                                           
            <input type="radio" name="modif" id="modif_oui" onClick="update_modif(this_id)"> Oui                                
            <input type="radio" name="modif" id="modif_non" onClick="update_modif(this_id)"   checked="checked"> Non

Je n'est mis qu'un div Modification.

Helas ca ne fonctionne toujours pas..

04/06/2009, 14h53
Bovino

Citation:

Envoyé par kev484

Code:

onClick="update_modif(this_id)

:nono:
pas this_id mais this.id !

En fait mon code fonctionne parfaitement sous FF et non sous IE je ne comprends pas. Voila tout on code :

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
<html>                                            
  <head>                                                                          
    <title>Information Client                                                                           
    </title>                                                                          
    <link rel="stylesheet" href="style.css" type="text/css" media="screen">
<script type="text/javascript">
function update_modif()
{
  modif=document.getElementById("Modification");
  if(document.getElementById("modif_oui").checked) {
    modif.style.display="block";
  } else {
    modif.style.display="none";
  }
}
</script>                                            
  </head>                                            
  <body onload="update_modif()">
<pre>
Ecran resumant toutes les informations entrees lors de l'inscription
Possibilite de les modifier via un lien
</pre><h1>Information Client</h1>                                                                          
    <div id="main">                                                                                                        
      <fieldset style=" width: 400px;">                                                                                                                                      
        <fieldset style="margin: 10px 5px 10px 5px; padding-left: 3px; padding-bottom: 5px;">                                                                                                                                                                    
          <legend> Information sur votre soci&eacute;t&eacute;                                                                                                                                                                      
          </legend>          <br />                                                                                                                                                                    
          <div> Nom de la soci&eacute;t&eacute; :                                                                                                                                                           
          </div><br />                                                                                                                                                                    
          <div> Activit&eacute; :                                                                                                                                                           
          </div><br />                                                                                                                                                                    
          <div> Region d'implantation :                                                                                                                                                           
          </div>            <br />                                                                                                                                                                   
          </fieldset>                                                                                                                                                                    
          <fieldset style="margin: 10px 5px 10px 5px; padding-left: 3px; padding-bottom: 5px;"">                                                                                                                                                                                     
            <legend> Information compte client                                                                                                                                                                                       
            </legend>            <br />                                                                                                                                                                                                    
            <div> Email :                                                                                                                                                                                       
            </div>   
                                   <br />                                                                                                                                                                   
            <div> Mot de passe :                                                                                                                                                             
            </div>                                                                    
            <div id="Modification">                                                                        
              <div>                                                                   
                <label for="password"> Nouveau mot de passe                                                                                                                                                                                                                                                                                                                                                                          
                </label>                                                                                                                                                                                                                                                                                                                                                                             
                <input type="password" name="password" />                                                             
              </div>                                            
              <div>                                                                                     
                <label for="password2"> Confirmer votre nouveau mot de passe                                                                                                                                                                                                                                                                                                                                                                          
                </label>                                                                                                                                                                                                                                                                                                                                                                             
                <input type="password" name="password2" />                                            
              </div>                                      
            </div>                    <br />                                                                     
            <div> Nombre d'annonces :                                                                      
            </div><br />                                                                                                                                                             
            </fieldset>                               
            <label for=""> Voulez-vous modifier vos infos ?                                                                                                                                                                                                                                                                                                                                                                      
            </label>                                                                                                           
            <input type="radio" name="modif" id="modif_oui" onClick="update_modif()"> Oui                                
            <input type="radio" name="modif" id="modif_non" onClick="update_modif()"   checked="checked"> Non                                                                                                                                                     
            </fieldset>                                                                                                
    </div>                                            
  </body>
</html>

Bon ... c'est un peu vicieux :mrgreen:
Comme ça, ça marche :
Code:

1 2 3 4 5 6 7 8 9 function update_modif() { la_modif=document.getElementById("Modification"); if(document.getElementById("modif_oui").checked) { la_modif.style.display="block"; } else { la_modif.style.display="none"; } }
Tout ça parce que "historiquement" (je le dis comme ça pour pas avoir à rechercher les versions concernées :aie: ), la syntaxe IE permettait de faire référence à un objet directement par son ID. Ex :
Code:

1 2 3 alert(Mon_champ.value); // au lieu de alert(document.getElementById('Mon_champ').value);
Or, pour mémoire, IE confond allègrement name et ID ...
Or (bis) tu as dans ta page des champs

Code:

name="modif"

Pour IE, donc

Code:

modif=document.getElementById("Modification");

revient à

Code:

document.getElementById("modif")=document.getElementById("Modification");

ce qui ne lui plaît pas et c'est bien compréhensible.

Oualà ! :mouarf:

A+

04/06/2009, 15h44
Bovino

Ah oui... j'étais passé à coté... modif est à la fois une variable et le name d'un élément de formulaire... ça perturbe beaucoup IE !
Rajoute :

Code:

var modif=document.getElementById("Modification");

Plus d'explications dans la FAQ !
04/06/2009, 15h47
E.Bzz

Citation:

modif est à la fois une variable et un name

Pas besoin de continuer la phrase ;)

(pas de <form> dans la page)

A+
05/06/2009, 10h19
kev484

Merci beaucoup cela fonctionne tres bien. Par contre je ne peux pas mettre plusieurs div ayant comme ID Modification?
05/06/2009, 10h28
andry.aime

Un id doit être unique dans toute la page. Donc non, tu ne peux pas mettre plusieurs div ayant comme ID Modification.
05/06/2009, 11h10
kev484

Ok donc si je veux faire apparaitre plusieurs champ je dois créer différente fonction JS?
05/06/2009, 11h20
E.Bzz

Citation:

Envoyé par kev484

Ok donc si je veux faire apparaitre plusieurs champ je dois créer différente fonction JS?

Tu peux aussi gérer un compteur pour avoir
Modification_1
Modification_2 ....

Tu n'as plus qu'à passer la valeur du compteur à ta fonction suivant le champ à traiter.

A+
05/06/2009, 11h51
kev484

Merci beaucoup.