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

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

Luís Ramalho · Accepted Answer · 2020-05-05T02:04:44.840

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>

You're hiding the `containerResult` div along with the `containerMessage` div, check the snippet above. I've edited my answer. — Luís Ramalho, May 05 '20 at 02:00

score 0 · Answer 2 · answered May 05 '20 at 02:08

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:

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

score 0 · Answer 3 · answered May 05 '20 at 02:17

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, e.g. . 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>

You will also need to preventDefault la pointed out in some of the other ansers — Moshe Sommers, May 05 '20 at 02:18

Hide a DIV and show another when I press the enter key

3 Answers3