时间戳

首页 > 解决方案 > 当我按下回车键时隐藏一个 DIV 并显示另一个

javascript - 当我按下回车键时隐藏一个 DIV 并显示另一个

问题描述

我正在尝试执行一个功能，当我按下回车键时它会消失一个 div (containerMessage)而另一个(containerResult)会出现，我做错了什么？当我按下回车键时，甚至没有调用该函数

一个活生生的例子

HTML

<html>

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="bloco">
        <h1>NSGM</h1>
        <h2>Namorada Super Gostosa e Modelo</h2>
        <img src="girlfriend.png">
        <div id="containerMessage">
            <p id="message">Qual seu nome meu amor</p>
            <form>
                <input type="text" name="name" id="digitarNome">
            </form>
            <div id="containerResult">
                <p id="result">EU TE AMO RODRIGO</p>
            </div>
        </div>
    </div>

    <script src="NSGM.js"></script>
</body>

</html>

Javascript

var digitarNome = document.getElementById("digitarNome");
digitarNome.addEventListener("keydown", function (e) {
    if (e.keyCode === 13) {
        validate(e);
    }

});


function validate(e) {
    if (document.getElementById('containerMessage').style.display == 'block') {
        document.getElementById('containerMessage').style.display = 'none'
        document.getElementById('containerResult').style.display = 'block'
    }
}

标签： javascripthtmlcss

解决方案

当您按下回车键时，表单会被提交，因此您必须阻止该默认行为：

var digitarNome = document.getElementById("digitarNome");
digitarNome.addEventListener("keydown", function (e) {
  if (e.keyCode === 13) {
    e.preventDefault(); // Prevent submitting the form
    validate(e);
  }
});

另一个问题是您隐藏了containerMessage包含您的 div containerResult，因此它永远不会显示。检查下面的代码片段，但基本上您只需将containerResultdiv 移出containerMessagediv。

var digitarNome = document.getElementById("digitarNome");
digitarNome.addEventListener("keydown", function(e) {
  if (e.keyCode === 13) {
    e.preventDefault();

    validate(e);
  }
});

function validate(e) {
  let container = document.getElementById("containerMessage");

  if (!container.style.display || container.style.display == "block") {
    container.style.display = "none";
    document.getElementById("containerResult").style.display = "block";
  }
}
body {
  background-color: red;
  margin: 0;
}

img {
  height: 50vh;
}

#bloco {
  text-align: center;
  margin: 0;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

h1 {
  margin: 100px 0px 0px 0px;
  font-size: 10em;
}

h2 {
  margin: 0;
  font-size: 3em;
}

p {
  font-size: 3em;
  margin: 0;
}

h1,
h2,
p {
  color: white;
}

input[type="text"] {
  margin: 50px 0px 0px 0px;
  padding: 16px 20px;
  border: none;
  border-radius: 8px;
  background-color: #f1f1f1;
  font-size: 2em;
  text-align: center;
}

input[type="text"]:focus {
  background-color: #ea8079;
  color: white;
  outline: 0;
}

#result {
  font-size: 6em;
}

#containerResult {
  display: none;
}

#containerMessage {
  display: block;
}
<div id="bloco">
  <h1>NSGM</h1>
  <h2>Namorada Super Gostosa e Modelo</h2>
  <div id="containerMessage">
    <p id="message">Qual seu nome meu amor</p>
    <form>
      <input type="text" name="name" id="digitarNome" />
    </form>
  </div>
  <div id="containerResult">
    <p id="result">EU TE AMO RODRIGO</p>
  </div>
</div>

推荐阅读