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

【问题标题】：Hide a DIV and show another when I press the enter key当我按下回车键时隐藏一个 DIV 并显示另一个
【发布时间】：2020-05-05 01:44:17
【问题描述】：

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

A Live Example

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'
    }
}

【问题讨论】：

标签： javascript html css

【解决方案1】：

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

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

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

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>

【讨论】：

你隐藏了containerResult div 和containerMessage div，检查上面的sn-p。我已经编辑了我的答案。

【解决方案2】：

问题在于.style.display 将仅返回当前样式，前提是它之前已内联或通过 javascript 设置。

否则，您必须使用：

getComputedStyle(element, null).display

element 先前在 DOM 中被选中。

我从示例中删除了表单以消除干扰。

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

});

function validate(e) {
  let msgDiv = document.getElementById('containerMessage');
  let resDiv = document.getElementById('containerResult');
  let divStyle = getComputedStyle(msgDiv, null).display;
  if (divStyle == 'block') {
    msgDiv.style.display = 'none';
   resDiv.style.display = 'block';
  }
}

#containerResult{display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="bloco">
  <div id="containerMessage">
      Nome meu amor: <input type="text" name="name" id="digitarNome">
  </div>
  <div id="containerResult">
    <p id="result">EU TE AMO RODRIGO</p>
  </div>
</div>

参考资料：

https://stackoverflow.com/a/4866269/1447509

【讨论】：

【解决方案3】：

Element.style 只会从元素的属性中检索样式，所以

document.getElementById('containerMessage').style.display == 'block'

总是返回false

来自W3学校https://www.w3schools.com/jsref/prop_html_style.asp

注意：style 属性只返回元素的内联样式属性中设置的 CSS 声明，例如 .无法使用此属性从文档中的部分或外部样式表中获取有关样式规则的信息。

您可以改为将显示样式应用为像这样的行属性

<div id="containerMassage" style="display:block"></div>

【讨论】：

您还需要防止在其他一些分析中指出的默认 la