Comment puis-je faire basculer une entrée de formulaire (pas toutes en même temps) ?

Question

Je veux basculer l'affichage des entrées dans un formulaire, pas chaque entrée. J'ai attribué un bouton à chaque élément d'entrée, de sorte que lorsque l'on clique sur ce bouton, cette entrée doit apparaître ou disparaître.

J'ai cherché à résoudre ce problème, mais toutes les fonctions que j'ai trouvées sont pour le formulaire entier, j'ai essayé js, jquery, mais ça ne marche pas.

L'entrée est quelque chose comme :

 <input type="text"  id='id1' placeholder="Insert here">

Et le bouton :

 <button id="b_id1" onclick="myFunction(id1)">Click Me id1</button>

J'utilisais JSfunction, mais ça ne sert à rien :

function myFunction(id) {
  var x = document.getElementById('id');
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

J'ai eu cette erreur aussi :

Erreur de Type Non Rattrapée : Impossible de lire la propriété 'style' de null à maFonction

Answer 1

Vous utilisez donc une fonction lorsque vous appuyez sur un bouton, mais je ne vois pas de "onclick" dans votre bouton.

<button onclick="myFunction('b_id1')" id="b_id1">Click Me id1</button>

Ajoutez cette action à votre bouton et la fonction devrait fonctionner. L'erreur affichée est due au fait que vous passez un id NULL dans votre fonction donc le style de l'affichage n'existe pas.

Answer 2

Vous devez ajouter ' au javascript pour détecter que id1 est une chaîne :

<button id="b_id1" onclick="myFunction('id1')">Click Me id1</button>

Answer 3

Pour prolonger le commentaire de @MauriceNino, si vous voulez un code générique, vous pouvez utiliser ce qui suit. Vous pouvez assigner un onclick aux boutons qui transmettent l'objet bouton lors du clic. À partir de là, vous pouvez extraire l'identifiant de la boîte de saisie et le manipuler.

function myFunction(id) {
var id = id.id.split("_")[1];//extract input id from button id
  var x = document.getElementById(id);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<input type="text"  id='id1' placeholder="Insert here">

 <button id="b_id1" onclick = "myFunction(this)">Click Me id1</button>

Answer 4

Si vous pouvez utiliser jQuery, essayez ce code

function myFunction(id) {
  if($(id).css('display') === "none") {
    $(id).show();
  } else {
    $(id).hide();
  }
}

avec votre bouton

<button id="b_id1" onclick="myFunction('#id1');">Click Me id1</button>

Answer 5

function myFunction(e) {
      var x = document.getElementById('id1');
      x.classList.toggle("mystyle");
}

.mystyle{
        display:none;
    }

<input type="text"  id='id1' placeholder="Insert here">
  <button id="b_id1" onclick="myFunction()">Click Me id1</button>