Affichage conditionnel de formulaires d'éléments html

Eh bien, après une introduction d'une heure au javascript, j'ai trouvé le code suivant. Il a fait ce que je voulais bien, mais ensuite je voulais quelque chose d'autre et ça ne marchera pas. Je voulais qu'en cliquant sur un bouton, un certain champ se cacherait et en cliquant sur un autre oui, un autre le cacherait aussi, MAIS, bien sûr, il devait faire l'autre montrer, sinon on se retrouverait avec rien et le but était de présenter différents champs en fonction de ce que l'utilisateur a cliqué (sur un bouton radio) Donc, de manière enfantine, j'ai fait mon code et ça a marché. Mais ensuite il m'est venu à l'esprit que je voulais d'abord avoir les deux champs cachés au lieu des deux champs affichés, et voici le problème. J'ai ajouté une valeur 0 au paramètre de la fonction "le dire" que lorsque x = 0, alors visibility = hidden. Mais ça ne m'écoutera pas! Donc, la partie du code quand il dit x = 1 et 2 fonctionne, celle qui est à peu près à 0, ne l'est pas.Affichage conditionnel de formulaires d'éléments html

C'est un code tellement simple que quelqu'un peut sourire, mais bon, c'était propre et ça a marché. Est-ce que quelqu'un sait comment cacher les champs avant de cliquer sur les boutons?

Merci beaucoup je supprimer certaines balises du HTML

<html> 
    <head> 
     <script language="javascript"> 
      var x = 0; 

      function hola(x) { 
       if(x == 0) { 
        document.getElementById("cont1").style.visibility="hidden"; 
        document.getElementById("cont2").style.visibility="hidden"; 
       } 

       if(x == 1) { 
        document.getElementById("cont1").style.visibility="visible"; 
        document.getElementById("cont2").style.visibility="hidden"; 
       } 

       if(x == 2) { 
        document.getElementById("cont1").style.visibility="hidden"; 
        document.getElementById("cont2").style.visibility="visible"; 
       } 
      } 
     </script> 
    </head> 

    <body> 
     <input type="button" onclick="hola(1)" value="hidefield2" id="boton1"> 
     <div id="cont1"> 
      <input type="text"> 
     </div> 

     <input type="button" onclick="hola(2)" value="hidefield1" id="boton2"> 

     <div id="cont2"> 
      <input type="text"> 
     </div> 
    </body> 
<html>

Source

2010-10-18 Alvaro

Ne pas vous pensez que vous devriez ** appeler ** la fonction avec 0 comme paramètre à un moment donné? – Pointy

Bonjour, merci d'avoir pris le temps de jeter un coup d'oeil à ma question. Selon votre commentaire, je pense que je l'ai fait dès le début, j'ai mis x = 0, mais maintenant que vous le dites, je viens de penser que cette variable n'a pas le pouvoir de franchir la ligne du début de la fonction, c'est-à-dire que la fonction peut ignorer l'affectation de 0 à x lignes ci-dessus. Par conséquent, si la valeur par défaut est naturelle, la visibilité est visible, c'est pourquoi et puisqu'il n'y a pas eu d'autre assigment, elle reste. Alors l'explication au comportement doit probablement que la valeur X = 0 déclarée avant la fonction n'est pas globale. – Alvaro

Qu'est-ce travaillé:
Vous avez eu deux boutons, visibles au début . Et en cliquant sur un bouton, vous avez caché une div, et en avez rendu une autre visible.

Maintenant, vous avez besoin d'une situation où les divs doivent être cachés au début, puis affichez lorsque vous cliquez sur un bouton.

Par défaut, pour tous les éléments pour lesquels un attribut visibility explicite n'est pas indiqué, visibility est considéré comme .

Pour rendre le bouton invisible, vous devez ajouter visibility:hidden au bouton.

Vous pouvez le faire de deux façons:

dans le code pour les div s, faites alors "invisible par défaut" en ajoutant style='visibility:hidden'.

Ajouter une autre fonction javascript qui est appelé la charge de la page, et rend invisible les deux divs:

function hideBoth() 
{ 
    document.getElementById("cont1").style.visibility="hidden"; 
    document.getElementById("cont2").style.visibility="hidden" ; 
}

Appelez sur la charge de votre page: <body onload='hideBoth()'>

Source

2010-10-18 17:26:13 Nivas

Merci aux deux commentateurs: Mes conclusions après avoir travaillé avec vos propositions sont: 1) Je pense que la raison du problème que l'assignation de x = 0 ne fonctionnerait pas malgré l'existence d'un appel à cela, c'est que le X a été placé ci-dessus avant le début de la fonction. 2) Si j'ai codé en dur la visibilité cachée dans la balise html, bien qu'elle l'ait cachée, elle ne s'afficherait pas en cliquant sur les boutons. 3) Enfin, l'appel onload à la fonction du corps et l'ajout de la fonction hideboth ont fait l'affaire. Merci beaucoup. Alvaro – Alvaro

Cette ligne:

document.getElementById("cont1").style.visibility="hidden";

Ajoute ceci:

style="visibility: hidden;"

à ceci:

<div id="cont1">

pour la faire ressembler à ceci:

<div id="cont1" style="visibility: hidden;">

Vous pouvez le faire vous-même, en ajoutant simplement cet attribut à votre balise html.

Oh oui, et ceci:

<div id="cont1">

est la même que celle-ci:

<div id="cont1" style="visibility: visible;">

Source

2010-10-18 17:08:29

Affichage conditionnel de formulaires d'éléments html

Répondre

Questions connexes