當我按下回車鍵時隱藏一個 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.