Hide a DIV and show another when I press the enter key
Question
I'm trying to do a function that when I press the enter key it disappears a div (containerMessage) and another (containerResult) one appears, what am I doing wrong? When I press the enter key the function is not even called
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 answers
solution1
3 ACCPTED 2020-05-05 01:47:52
When you press enter, the form gets submitted, so you'll have to prevent that default behaviour:
var digitarNome = document.getElementById("digitarNome");
digitarNome.addEventListener("keydown", function (e) {
if (e.keyCode === 13) {
e.preventDefault(); // Prevent submitting the form
validate(e);
}
});
The other issue is that you're hiding the containerMessage div which contains your containerResult , so it will never be shown. Check the snippet below, but basically you'll just have to move the containerResult div out of the 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>
solution2
0 2020-05-05 02:08:30
The problem is that .style.display will only return the current style if it has been previously set inline or via javascript.
Otherwise, you must use:
getComputedStyle(element, null).display
where element is previously selected in the DOM.
I removed the form from the example to remove that distraction.
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>
References:
solution3
0 2020-05-05 02:17:02
Element.style will only retrieve the styles from the attribute on the element so
document.getElementById('containerMessage').style.display == 'block'
Will always return false
From W3 schools https://www.w3schools.com/jsref/prop_html_style.asp
Note: The style property only returns the CSS declarations set in the element's inline style attribute, eg . It is not possible to use this property to get information about style rules from the section in the document or external style sheets.
You can instead apply the display style as in line attribute like so
<div id="containerMassage" style="display:block"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.