Je m'entraîne actuellement à utiliser juste du vanilla JavaScript pour programmer un site web. En ce moment, je crée un site Web où le fait de cliquer sur l'icône d'empreinte digitale déclenche une entrée à afficher pour que l'utilisateur saisisse le mot de passe. Voici le code que j'ai essayé, dont certains que j'ai adapté de https://gomakethings.com/how-to-show-and-hide-elements-with-vanilla-javascript/.

Malgré cela, je ne peux pas le faire fonctionner. Veuillez nous aider à corriger le code.

Code

var show = function(elem) {
  elem.style.display = 'block';
};

var hide = function(elem) {
  elem.style.display = 'none';
};
var toggle = function(elem) {
  elem.classList.toggle('wash');
};

// Listen for click events
document.addEventListener('click', function(event) {

  // Make sure clicked element is our toggle
  if (!event.target.classList.contains('wash')) return;

  // Prevent default link behavior
  event.preventDefault();

  // Get the content
  var content = document.querySelector(event.target.hash);
  if (!content) return;

  // Toggle the content
  toggle(content);

}, false);
h1 {
  font-family: 'Libre Baskerville', serif;
  text-align: center;
  font-size: 4em;
  color: #e0e4ec
}

html {
  background: #556c9a
}

.keys {
  text-align: center;
}

.fa-fingerprint {
  text-align: center;
  padding-left: 2%;
  padding-right: 2%;
  font-size: 3rem;
}

h2 {
  position: relative;
  text-align: center;
}

.press:hover {
  color: yellow;
}

.type {
  display: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Hello</title>
  <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@1&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/923b4d30ed.js" crossorigin="anonymous"></script>
  <h1>Pineapple</h1>
</head>

<body>


  <div class="keys">
    <span class="press"><i class="fas fa-fingerprint"></i><h2>Log In</h2></span>
    <span class="type"><input placeholder="Password"></span>
  </div>
</body>

</html>
1
Yong 5 avril 2020 à 13:24

4 réponses

Vous pouvez ajouter un écouteur d'événements à la classe .press pour basculer entre la définition de l'affichage de <input> sur none et block.

document.getElementsByClassName('press')[0].addEventListener('click', () => {
  var input = document.getElementsByClassName('type')[0];
  input.style.display = (input.style.display == 'none') ? 'block' : 'none';
});
h1 {
  font-family: 'Libre Baskerville', serif;
  text-align: center;
  font-size: 4em;
  color: #e0e4ec
}

html {
  background: #556c9a
}

.keys {
  text-align: center;
}

.fa-fingerprint {
  text-align: center;
  padding-left: 2%;
  padding-right: 2%;
  font-size: 3rem;
}

h2 {
  position: relative;
  text-align: center;
}

.press:hover {
  color: yellow;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Hello</title>
  <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@1&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/923b4d30ed.js" crossorigin="anonymous"></script>
  <h1>Pineapple</h1>
</head>

<body>


  <div class="keys">
    <span class="press"><i class="fas fa-fingerprint"></i><h2>Log In</h2></span>
    <span class="type" style="display: none;"><input placeholder="Password"></span>
  </div>
</body>

</html>
0
Zera 5 avril 2020 à 11:01

Il semblerait que vous deviez ajouter une méthode onclick() à votre <span> contenant la zone de saisie que vous souhaitez afficher, qui, une fois cliquée, changera la propriété d'affichage de aucune à bloquer .

Vous pouvez afficher la solution ici.

0
Shane Creedon 5 avril 2020 à 10:38

Cela ferait dans JS régulière. Cible et id et basculer l'état d'affichage.

function myFunction() {
  var x = document.getElementById("my");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
 h1{
  font-family: 'Libre Baskerville', serif;
  text-align: center;
  font-size: 4em;
  color:#e0e4ec
}
html{
  background: #556c9a
}
.keys{
  text-align:center;

}
.fa-fingerprint{
  text-align:center;
  padding-left:2%;
  padding-right:2%;
  font-size:3rem;
}
h2{
  position:relative;
  text-align:center;
}
.press:hover{
  color:yellow;
}
.type{
  display:none;
}
   <!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  <title>Hello</title>
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@1&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/923b4d30ed.js" crossorigin="anonymous"></script>
  <h1>Pineapple</h1>
  </head>
  <body>


    <div class="keys">
      <span class="press"  onclick="myFunction()"><i class="fas fa-fingerprint"></i><h2>Log In</h2></span>
      <span class="type" id="my"><input  placeholder="Password"></span>
    </div>
  </body>

</html>
0
ikiK 5 avril 2020 à 10:46

En Javascript, vous pouvez le faire d'une manière simple en vérifiant simplement la propriété de block et none.

  1. Le type input est un élément à fermeture automatique que vous n'avez pas besoin d'ajouter </input> à la fin.
  2. Vous devez définir la propriété display sur le type input et en fonction de l'événement de clic, vous pouvez toggle à la condition.
document.addEventListener('click', function(event) {
  var type = document.getElementById('inputType'); // the type you want to hide/show
  if (type.style.display !== 'none') {
    type.style.display = 'none';
  } else {
    type.style.display = 'block';
  }
});
h1 {
  font-family: 'Libre Baskerville', serif;
  text-align: center;
  font-size: 4em;
  color: #e0e4ec
}

html {
  background: #556c9a
}

.keys {
  text-align: center;
}

.fa-fingerprint {
  text-align: center;
  padding-left: 2%;
  padding-right: 2%;
  font-size: 3rem;
}

h2 {
  position: relative;
  text-align: center;
}

.press:hover {
  color: yellow;
}
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@1&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/923b4d30ed.js" crossorigin="anonymous"></script>
<h1>Pineapple</h1>

<body>
  <div class="keys">
    <span class="press"><i class="fas fa-fingerprint"></i><h2>Log In</h2></span>
    <span id="inputType" style="display:none;"><input placeholder="Password"/></span>
  </div>
</body>
0
Manjuboyz 5 avril 2020 à 10:57