Input password to show a div?

Question

I'm making a website for fun, and there's a little easter egg I want to put in it where you input a password to see a hidden page on the site.

I know how to make a login form with html and I get the "input" tag for putting in the password, but I'm not sure what the "output" should be..? I also want it to display a div or span only when the correct text is entered.

It would be cool if I could have both a username and password be required to match, but I don't know how that'd work at all.

Here is a similiar topic, you can try the solutions: https://stackoverflow.com/questions/49755659/enter-password-to-display-content-of-div — Takit Isy, Apr 16 '18 at 10:46

score 1 · Answer 1 · answered Apr 17 '18 at 10:38

function check_password (input_element) {
  
  //get value of input
  var password = input_element.value;
  
  //check value and show/hide the div
  if (password == 'secret')
      document.getElementById ('hidden_div').style.display = 'block';
  else
      document.getElementById ('hidden_div').style.display = 'none';

}

Enter 'secret' to see the div.
<br>
<input type="text" onkeyup="check_password (this);">
<br>
<div id="hidden_div" style="display: none;">I was hidden until the right password was entered.</div>

score -1 · Answer 2 · answered Apr 16 '18 at 10:48

Well, you need javascript for this and just an easy onclicklistener.

For example:

<button onclick="checkHidden()">Login</button>

<script>
function checkHidden()
{
    if(document.getElementById("name").value == "Name" && document.getElementById("pw") == "123")
    {
        window.location.href = "andereSeite.html";
    }
}
</script>

But obviously everyone can see the username & password. They just need to let them show the source. If you wanna use this secretly you need to use PHP :) There are many tutorials out there for form + PHP.

score -1 · Answer 3 · answered Apr 16 '18 at 10:53

Well, here is a simple example. Use onkeyup="" attribute to run the javascript function check_password(this) (this refers to the input-tag) after every entered character. If the password is right the div will appear with display: block/none;.

function check_password (input_element) {
  
  //get value of input
  var password = input_element.value;
  
  //check value and show/hide the div
  if (password == 'secret')
      document.getElementById ('hidden_div').style.display = 'block';
  else
      document.getElementById ('hidden_div').style.display = 'none';

}

Enter 'secret' to see the div.
<br>
<input type="text" onkeyup="check_password (this);">
<br>
<div id="hidden_div" style="display: none;">I was hidden until the right password was entered.</div>

Input password to show a div?

3 Answers3