CODEWITHSUNDEEP
javascripthtmlcss
Rodrigo Liva
Rodrigo Liva

Reputation: 67

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

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

Upvotes: 1

Views: 1457

Answers (3)

Moshe Sommers
Moshe Sommers

Reputation: 1516

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>

Upvotes: 0

cssyphus
cssyphus

Reputation: 40038

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

Upvotes: 0

Lu&#237;s Ramalho
Lu&#237;s Ramalho

Reputation: 10208

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>

Upvotes: 3

Related Questions