Je suis encore très novice en html css et JS. J'essaie de faire apparaître/basculer un champ de saisie à partir d'un clic sur un bouton. voici mon code pour l'instant.

HTML

<form>
            <fieldset>
                <legend>Competency 15 Event Listeners</legend>
                <ol>
                    <li><button type="text" id="theButton" onclick="clickMe()">Click me!</button></li>
                    <li><input type="text" name="popup" id="popup"></li>
                </ol>
            </fieldset>
        </form>

CSS

form{
    width: 50%;

}
 #popup {
    display: none;
 }

Javascript

function clickMe(){
    var text = document.getElementById("popup");
  if (text.style.display === "none") {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
    }

J'ai cherché partout sur Internet et je n'arrive pas à trouver la réponse. Merci d'avance

1
ArcticMoose 21 sept. 2021 à 20:20

4 réponses

Meilleure réponse
    <form>
        <fieldset>
            <legend>Competency 15 Event Listeners</legend>
            <ol>
                <li><input type="button" value="click here" onclick="clickMe()"></li>
                <li><input type="text" id="show"></li>
            </ol>
        </fieldset>
    </form>

    <script>
        function clickMe() {
            var text = document.getElementById("show");
            if (!text.style.display) {
                text.style.display = "none";
            }
            if (text.style.display === "none") {
                text.style.display = "block";
            } else {
                text.style.display = "none";
            }
        }
    </script>



form{
    width: 50%;

}

#show {
   display: none;
}

Si vous utilisez des ensembles de champs, vous devez utiliser la saisie avec un bouton de type pour créer des boutons. J'ai changé votre bouton en une entrée avec un bouton de type et maintenant cela fonctionne.

En outre, ajout d'une autre boucle if qui vérifie s'il existe une propriété d'affichage et si elle est vide "", elle la définit sur "aucun". Sans la première boucle if, il faudra 2 clics pour afficher l'entrée, car vous aurez d'abord besoin de votre else pour définir l'affichage sur "aucun" et seul le deuxième clic le définira sur "bloquer".

Je ne me souviens pas pourquoi cela fonctionne comme ça, mais c'est juste comment CSS fonctionne, si vous en avez envie, utilisez console.log (text.style) pour obtenir un objet CSS complet et l'examiner.

0
Gerpstarg 21 sept. 2021 à 18:22

Je recommanderais plutôt de basculer entre les classes CSS :

function clickMe() {
  var text = document.getElementById("popup");
  text.classList.toggle("hide");
  text.classList.toggle("show");
}
form {
  width: 50%;
}

.hide {
  display: none;
}

.show {
  display: block;
}
<button id="theButton" onclick="clickMe()">Click me!</button>
<input type="text" name="popup" id="popup" class="hide">
1
Rojo 21 sept. 2021 à 17:39

Quelques choses:

  1. Si la valeur de l'attribut de bouton type n'est pas valide (comme text ici), alors la valeur devient submit. Dans un formulaire, en cliquant sur le bouton submit actualise la page. Vous devrez donc utiliser un type différent.

  2. Initialement, le style.display est "" car vous utilisez des éléments DOM pour le trouver. L'analyseur DOM n'a pas de connaissance des styles ajouté avec la feuille de style CSS. Vous devrez donc inclure une condition supplémentaire dans votre comparaison -

if (text.style.display === "none" || text.style.display === "") {

Alternativement, vous auriez pu mettre le style en ligne, qui sera analysé par le DOM comme ci-dessous :

function clickMe(){
    var text = document.getElementById("popup");
    console.log(text.style.display);
  if (text.style.display === "none") {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}
form{
    width: 50%;

}
<form>
            <fieldset>
                <legend>Competency 15 Event Listeners</legend>
                <ol>
                    <li><button type="button" id="theButton" onclick="clickMe()">Click me!</button></li>
                    <li><input type="text" name="popup" id="popup" style="display: none;"/></li>
                </ol>
            </fieldset>
        </form>
1
Tushar Shahi 21 sept. 2021 à 17:47

Puisque vous définissez la propriété display de l'élément initial viaCSS, vous devrez peut-être utiliser la méthode getComputedStyle pour obtenir le style actuel

<style>
 #popup {
    display: none;
 }
</style>

<form>
  <ol>
      <li><button type="button" onclick=toggleMe()>Toggle me!</button></li>
      <li><input type="text" id="popup"></li>
  </ol>
</form>

<script>
  function toggleMe() {
    var text = document.getElementById('popup')
    text.style.display = window.getComputedStyle(text, null).display === 'none' ? 'block' : 'none'
  }
</script>
0
decryptingfuture 21 sept. 2021 à 17:42