affichage conditionnel des formes de l'élément html

Bien, après une heure d'introduction à javascript, je ve venir avec le code suivant. Il faisait ce que je voulais bien, mais ensuite, j'ai voulu quelque chose d'autre et il l'habitude de travailler.

Je voulais que ce soit en cliquant sur un bouton, un champ de se cacher et en cliquant sur un autre oui, un autre se cache trop, MAIS, bien sûr, il a dû faire aux autres, sinon on allait se retrouver avec rien et le but était de présenter les différents champs en fonction de ce que l'utilisateur a cliqué (sur un bouton radio) Ainsi, dans un enfantin ainsi que j'ai fait mon code et ça a fonctionné. Mais alors il est venu à moi que je voulais d'abord avoir boths champs cachés au lieu de deux champs affichés, et là est le problème. J'ai ajouté une valeur de 0 pour le paramètre de la fonction "dire" que lorsque x = 0, alors la visibilité = cachés. Mais il l'habitude de m'écouter!, Ainsi, la partie du code lorsqu'il dit que x = 1 et 2 ouvrages, l'un sur 0, ne fonctionne pas.

C'est un code simple qui peut rendre le sourire à quelqu'un, mais bon, c'était propre, et cela a fonctionné. Personne ne sait comment faire pour avoir les champs cachés avant de cliquer sur les boutons ?

Merci beaucoup je supprimer certaines balises du code HTML de

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

Ne pensez-vous pas que vous devriez réellement appel la fonction avec 0 comme paramètre à un certain point?
Bonjour,je vous remercie de prendre le temps de coup d'œil à 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 suis venue à penser que cette variable n'a pas le pouvoir de traverser la ligne de départ de la fonction, la fonction peut ne pas être conscients de la mission de 0 à x lignes ci-dessus. Par conséquent, si la valeur par défaut est naturellement, la visibilité visible, c'est pourquoi et depuis il n'y a pas d'autre mission alors qu'il reste. Puis l'explication pour le comportement doit probablement que la valeur X = 0 déclarées avant la fonction n'est pas global.

InformationsquelleAutor Alvaro | 2010-10-18

8

Ce travaillé:

Vous avez eu deux boutons, à la fois visible au début. Et au clic d'un bouton, vous vous êtes caché un div, et a fait un autre visible.

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

Par défaut, pour tous les éléments où un explicite visibility attribut n'est pas donné, visibility est considéré comme visible.

Faire sur le bouton invisible, vous devez ajouter visibility:hidden pour le bouton.

Vous pouvez le faire de deux façons:
1. dans le code de l' divs, faire ensuite "invisible par défaut" par l'ajout d'
  style='visibility:hidden'.
2. Ajouter une autre fonction javascript qui est appelée lors du chargement de la page, et rend les divs invisible:
```
function hideBoth()  
{  
   document.getElementById("cont1").style.visibility="hidden";  
   document.getElementById("cont2").style.visibility="hidden" ;   
}
```
Appeler de chargement de votre page: <body onload='hideBoth()'>
- Merci aux deux intervenants: Mes conclusions après avoir travaillé avec vos propositions sont les suivantes: 1) je pense que la raison du problème que l'affectation de x = 0 ne fonctionne pas malgré elle existe clairement un appel, c'est que le X a été placé à l'extérieur, au-dessus avant le début de la fonction. 2) Si j'ai codé en dur inline de la visibilité caché dans la balise html, bien qu'il ne se le cacher, il ne serait pas afficher en cliquant sur les boutons. 3) Enfin, le onload de l'appel à la fonction du corps et de l'ajout de la hideboth fonction a fait le tour. Je vous remercie beaucoup. Alvaro
InformationsquelleAutor Nivas
3

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, tout en ajoutant que l'attribut à votre balise html.

Oh ouais, et c':
```
<div id="cont1">
```
est le même que celui de:
```
<div id="cont1" style="visibility: visible;">
```
InformationsquelleAutor Gabriel McAdams

Vous pouvez utiliser jquery pour faire aussi! Voici un exemple qui prend l'entrée de votre CSS et les rend visibles ou pas:

function checkPrerequisites() {
  //The 4th line makes objects visible in the for loop.
  //Determines if pre-requisites are met and if so - makes div draggable
  //for new courses 

  for (var i = 0; i < courselist.length; i++) {
    if (prerequisitesMet(i)) {
      $('#' + i.toString()).css("background-color", "lightgreen");
      $('#' + i.toString()).css("visibility", "visible");
      $('#' + i.toString()).draggable();
    }
  }
}

InformationsquelleAutor

Vous devez vous connecter pour publier un commentaire.