Discussion :

[romain54500]

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 :

Uncaught ReferenceError: afficherCacher is not defined

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

Code :

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

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

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

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.

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

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

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

document.getElementById('offre')

Code :

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

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

[romain54500]

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

Code :

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

document.getElementById('offre')

Ce code ne marche pas

Code :

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

document.getElementById(offre)

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

Code :

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

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

Pour checkpart et checkpro il correspondent a ma feuille css.

[romain54500]

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 :

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

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 :

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

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

[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

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

[lysandro]

Un indice peut-être : que contiennent les variables javascript offre, demande et divCacher ?

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.

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

[sekaijin]

Code :

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

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

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

[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

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

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

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.

[NoSmoking]

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 :

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

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