Cacher Div suivant bouton radio

Version imprimable

Bonjour,

Je shouaite cacher/montrer une Div suivant le bouton radio qui est selectionné, j'ai trouver un code en fouillent le probléme ces qu'il ne marche pas, il me sort une erreur :

Citation:

Uncaught ReferenceError: afficherCacher is not defined

Je vois pas ou ce situe le probléme. voicie mon code.
Code:

1 2 3 4 5 6 7 function afficherCacher(){ if(document.getElementById(offre).checked){ document.getElementById(divCacher).style.display="block"; }else if (document.getElementById(demande).checked) { document.getElementById(divCacher).style.display="none"; } }
Code:

1 2 3 4 5 6 <div class="field"> <label for="checkpart">Offres</label><input type="radio" id="offre" name="choix" value="offres" onClick="afficherCacher();" /> </div> <div class="field"> <label for="checkpro">Demandes</label><input type="radio" id="demande" name="choix" value="demandes" onClick="afficherCacher();" /> </div>
Merci d'avance pour votre aide.

13/02/2015, 11h27
-Rpass-

à quel endroit ton code js est il placé/appelé dans ta page html ? Il faut faire attention à ce que ta fonction js soit définie avant l'affichage de ton élément DOM
13/02/2015, 13h11
Watilin

La fonction devrait exister au moment où l'utilisateur clique. À moins que tu l'aies accidentellement déclarée dans le contexte d'une autre fonction. Vérifie qu'elle existe avec ta console : tape afficherCacher dans la ligne de commande et fais entrée, tu seras tout de suite fixé.

Attention avec les id, il faut mettre des guillemets :

Code:

document.getElementById('offre')

Code:

document.getElementById('divCacher')

etc.

Quelques remarques à propos de ton code HTML. Tu as des <div class="field">. Tu connais l'élément <fieldset> ? Il est plus sémantique qu'une div, mais il y a des raisons de ne pas l'utiliser. Si tu connais et si tu as choisi de ne pas l'utiliser, ne tiens pas compte de ma remarque :P
À propos de tes labels : ils référencent des éléments appelés checkpro et checkpart, mais je ne vois pas ces éléments dans ton code. En principe ils devraient référencer les inputs qui sont juste à côté, car le rôle d'un label c'est avant tout d'aider l'utilisateur à cliquer.
13/02/2015, 16h37
romain54500

Merci pour ta réponse.
J'ai trouver mon erreur.

Code:

document.getElementById('offre')

Ce code ne marche pas

Code:

document.getElementById(offre)

J'ai laisser comme sa et cela marche il fallait juste que j'enleve les ; sur afficherCacher() ici

Code:

<input type="radio" id="demande" name="choix" value="demandes" onClick="afficherCacher()" />

Pour checkpart et checkpro il correspondent a ma feuille css.

Uncaught TypeError: Cannot read property 'checked' of null

Bonjour,

J'ai une erreur qui est apparue mais je ne vois pas d'ou cela peut provenir si quelqu'un a une idée merci d'avance. voicie le code lié.

Code:

1
2
3
4
5
6
7
8
function afficherCacher(){
  if(document.getElementById(offre).checked){
      document.getElementById(divCacher).style.display="block";
  }else if (document.getElementById(demande).checked) {
      document.getElementById(divCacher).style.display="none";
  }
 
}

mes bouton radio

Code:

1
2
<input class="radio" type="radio" id="offre"  name="choix" value="offres" checked="checked" onClick="afficherCacher()" /><label class="radio1">Offres</label>
													<input class="radio" type="radio" id="demande" name="choix" value="demandes" onClick="afficherCacher()" /><label>Demandes</label><br /><br />

15/02/2015, 10h59
sekaijin

document.getElementById(offre) => null ou
document.getElementById(demande) => null ou
document.getElementById(divCacher) => null

un coup de debugger et tu vas voir quel objet n'est pas défini

c'est comme dans tous les langage il faut vérifier que l'objet existe avant d'utiliser ces propriétés

A+JYT
15/02/2015, 11h03
romain54500

Salut et merci pour la réponse. J'ai deja utiliser le debugger il me donne que cette erreur et tout les variable sont bien définie ces bien la mon probléme je ne comprend d'ou provient l'erreur.
15/02/2015, 12h49
lysandro
Un indice peut-être : que contiennent les variables javascript offre, demande et divCacher ?
Citation:
Envoyé par https://developer.mozilla.org/fr/docs/Web/API/Document.getElementById

document.getElementById

Résumé
Renvoie l'élément dont l'ID est celui spécifié.

Syntaxe
element = document.getElementById(id);
où

element est un objet de type element.
id est une chaîne représentant l'identifant unique de l'élément voulu.
15/02/2015, 12h55
romain54500

Offre et Demande sont des input de type radio ces pour cette resond que la fonction et en mode checked pour declencher ou non divCacher. Qui contient une partie du formulaire suivant le bouton radio cocher.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function afficherCacher(){
  if(! document.getElementById(offre)){
      alert("l'élément d'id " + offre + " n'existe pas");
  }else if(! document.getElementById(demande)){
      alert("l'élément d'id " + demande + " n'existe pas");
  }else if(! document.getElementById(divCacher)){
      alert("l'élément d'id " + divCacher + " n'existe pas");
  }else   if(document.getElementById(offre).checked){
      document.getElementById(divCacher).style.display="block";
  }else if (document.getElementById(demande).checked) {
      document.getElementById(divCacher).style.display="none";
  }
}

15/02/2015, 14h03
NoSmoking

Bonjour,
inutile d'ouvrir une nouvelle discussion pour poursuivre la résolution de ton problème. Je fusionne donc les deux discussions.

Relis la réponse qui t'a été faite par Watilin, confirmée par les différents intervenants.
15/02/2015, 19h05
romain54500

Désolè j'ai bien relus et la reponse de watilin ne change rien.

sekaijin j'ai mis en place le controle que tu ma donner et j'obtient cette erreur :

l'element d'id [ object HTMLInputElement] n'existe pas. je vois pas a quoi sa correspond
15/02/2015, 20h34
Watilin
Si je comprends bien tes variables offre, demande et divCacher sont déjà des références sur les éléments HTML correspondants ? Dans ce cas tu n'as pas besoin d'utiliser getElementById.
Code:

1 2 3 if (offre.checked) { divCacher.style.display = "block"; } etc.
Mais ça marchera seulement si ces trois variables ont été initialisées plus tôt dans ton script.

J'insiste, attention à la différence entre variable et chaîne : offre est une variable, "offre" est une chaîne. La fonction getElementById ne fonctionne que quand on lui passe des chaînes.
15/02/2015, 21h30
NoSmoking
Citation:

Mais ça marchera seulement si ces trois variables ont été initialisées plus tôt dans ton script.

Pas forcément, c'est le coté sournois de l'interprétation du moteur javascript lors de la construction du DOM.
Code:

1 2 3 4 5 6 <body> <div id="offre"></div> <script> alert( offre.tagName); </script> </body>
affichera "DIV", c'est pour cette raison qu'il génére l'erreur
```
l'element d'id [ object HTMLInputElement] n'existe pas
```