[Solved] Enter password to display content of div

Question

Because you hid the content via an id based CSS selector, adding a “show” CSS class to it later won’t override the id rule that you already set. (Read this on how different CSS selectors are more specific than others and thus, more difficult to override.)

Here’s a quick example:

#d1 { display:none; }    /* Will override most other selectors */
div { display:block; }   /* Won't work */
.show { display:block; } /* Won't work */

<p>You aren't going to see the div below this paragraph even though it matches two selectors that indicate that it should be shown and even though those two selectors come after the one that hides it. This is because the way it's being hidden is with an id based selector and tag type and class selectors alone are less specific than an id selector and won't override it.</p>
<div id="d1" class="show">Hello?!</div>

So, first, set the content to be hidden with a CSS class instead of an id based selector, then later, you can just remove that class – no extra “show” class is needed.

Next, in your code you have a div with an id of HIDDENDIV, but your code attempts to get and show an element with an id of table. I’m assuming that this was just a typo when posting this question and that, in reality, you really to have a table to show, but you need to correct that.

Also, you should not be using HTML inline event attributes. This was the way we did event handling 20+ years ago before we had standards and unfortunately, is a technique that is so pervasive that it just won’t die the death it deserves. There are a variety of reasons not to use them. Instead, use modern standards and best-practices and do all of your event handling in separated JavaScript.

You also need to add an additional line just before you attempt to select all the text in the password field to give that element the focus, otherwise the select code won’t work (see code below for this).

// Get references to the elements you'll be working with
var input = document.getElementById("password");
var div = document.getElementById("HIDDENDIV");
var btn = document.getElementById("button");

// Set up event handlers in JavaScript
button.addEventListener("click", validate);

function validate(){
  if (input.value == 'PASSWORD') { 
     // No need to add a "show" class. Just remove the "hidden" class.
     div.classList.remove('hidden');
     
     // Or, add it:
     input.classList.add("hidden");
  } else {  
     password.focus(); // <-- If you don't do this first, your select code won't work
     password.setSelectionRange(0, password.value.length);   
     alert('Invalid Password!'); 
  }
}

input.addEventListener("keydown", function(event){
 if (event.keyCode === 13){
   // No reason to simulate a button click. Just call the code that needs to be run.
   validate();
 }
});

/* You only need to apply this to elements that should be hidden and
   then simply remove this class from hidden elements to show them. */
.hidden { display: none; }

<input type="text" id="password">
<br>
<input id="button" type="button" value="Login">
<div id="HIDDENDIV" class="hidden">bla</div>

NOTES:

Keep in mind that although this code can “work”, anyone can defeat
this code quite easily simply by looking at your source code. To
truly protect content from being consumed without the correct
credentials being provided, you need to implement a server-side
solution.
Just like inline scripting should no longer be done, the same can be
said for using XHTML self-terminating tag syntax (i.e. <br />,
<input />). That is also an old syntax that just won’t go away.
Here’s why you don’t need and shouldn’t use this syntax.

Accepted Answer