onClick qui ne s'applique pas

**kev484** · 04/06/2009, 14h06

Bonjour,

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

Code :

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

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 :

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

**Alexdezark** · 04/06/2009, 14h21

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

**Bovino** · 04/06/2009, 14h23

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 :

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

onClick="update_modif(this.id)

et de modifier ta fonction :

Code :

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

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";
  }
}

**kev484** · 04/06/2009, 14h51

Voila mon code maintenant :

Code :

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

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 :

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

**Bovino** · 04/06/2009, 14h53

Envoyé par kev484

Code :

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

onClick="update_modif(this_id)

pas this_id mais this.id !

**kev484** · 04/06/2009, 15h00

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

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

**E.Bzz** · 04/06/2009, 15h41

Bon ... c'est un peu vicieux

Comme ça, ça marche :

Code :

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

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

), la syntaxe IE permettait de faire référence à un objet directement par son ID. Ex :

Code :

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

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 :

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

name="modif"

Pour IE, donc

Code :

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

modif=document.getElementById("Modification");

revient à

Code :

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

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

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

Oualà !

A+

**Bovino** · 04/06/2009, 15h44

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 :

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

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

Plus d'explications dans la FAQ !

onClick qui ne s'applique pas

JavaScript

Vue hybride

Discussions similaires

Partager

Partager