Question

我目前正在练习仅使用普通JavaScript来对网站进行编程。目前，我正在创建一个网站，在该网站上单击指纹图标会触发输入，以显示给用户键入密码。这是我尝试过的代码，我改编自https://gomakethings.com/how-to-show-and-hide-elements-with-vanilla-javascript/。

尽管如此，我还是无法使它工作。请帮助您修复代码。

代码

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>

Answer 1

似乎您需要在onclick()上添加一个<span>方法，其中包含要显示的输入框，单击此框将把显示属性从 none 更改为来屏蔽。

您可以查看解决方案here。

Answer 2

在Javascript中，您只需检查block和none的属性，就可以通过简单的方式完成此操作。

input类型是自闭元素，您无需在末尾添加</input>。
您需要将display属性设置为input类型，并根据点击事件，可以在条件上toggle进行访问。

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>

Answer 3

这将在常规JS中完成。目标和ID以及切换显示状态。

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>

Answer 4

您可以将事件监听器添加到.press类中，以在将<input>的显示设置为none和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>

单击图标后无法显示输入

代码

4 个答案: