当我按下回车键时隐藏一个 DIV 并显示另一个
[英]Hide a DIV and show another when I press the enter key
问题描述
我正在尝试做一个 function ，当我按下回车键时它会消失一个 div (containerMessage)而另一个(containerResult)会出现，我做错了什么？ 当我按下回车键时，甚至没有调用 function
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'
}
}
3 个解决方案
解决方案1
3 已采纳 2020-05-05 01:47:52
当您按下回车键时，表单将被提交，因此您必须阻止该默认行为：
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，因此它永远不会显示。 检查下面的代码片段，但基本上您只需将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>
解决方案2
0 2020-05-05 02:08:30
问题是.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>
参考：
解决方案3
0 2020-05-05 02:17:02
Element.style 只会从元素的属性中检索 styles 所以
document.getElementById('containerMessage').style.display == 'block'
将始终返回 false
来自 W3 学校https://www.w3schools.com/jsref/prop_html_style.asp
注意：style 属性仅返回在元素的内联样式属性中设置的 CSS 声明，例如 . 无法使用此属性从文档中的部分或外部样式表中获取有关样式规则的信息。
您可以改为将显示样式应用为 line 属性，如下所示
<div id="containerMassage" style="display:block"></div>
当我按Enter键时， <div> 消失
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.