I'd like to enter the word,PASSWORD and for the content inside HIDDENDIV to display.

Can someone show me where I'm going wrong?

#HIDDENDIV {
    display: none;
}

<input type="text" id="password" onkeydown="if (event.keyCode == 13) document.getElementById('button').click()" />
        <br/>
        <input id="button" type="button" value="Login" onclick="if (document.getElementById('password').value == 'PASSWORD') { 
document.getElementById('table').classList.toggle('show');   document.getElementById('passw').style.display='none'; } 
else {  alert('Invalid Password!'); password.setSelectionRange(0, password.value.length);   } " />

<div id="HIDDENDIV">bla</div>

I'd like to enter the word,PASSWORD and for the content inside HIDDENDIV to display.

Can someone show me where I'm going wrong?

#HIDDENDIV {
    display: none;
}

<input type="text" id="password" onkeydown="if (event.keyCode == 13) document.getElementById('button').click()" />
        <br/>
        <input id="button" type="button" value="Login" onclick="if (document.getElementById('password').value == 'PASSWORD') { 
document.getElementById('table').classList.toggle('show');   document.getElementById('passw').style.display='none'; } 
else {  alert('Invalid Password!'); password.setSelectionRange(0, password.value.length);   } " />

<div id="HIDDENDIV">bla</div>

• javascript
• html

• 3 a good thing to do is not have all the bloody code inside that onclick event declaration like whew – L_Church Commented Apr 10, 2018 at 14:03
• 5 Open your console, and it will tell you exactly what the problem is. – jmcgriz Commented Apr 10, 2018 at 14:04
• 5 The first step would be to realise that this doesn't really provide any security whatsoever. – deceze ♦ Commented Apr 10, 2018 at 14:05

3 Answers 3

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

I modified and cleaned your code to get to this working snippet:
(See my ments in the code)

// Scripts belongs in tag scripts or in separate files, inline scripts shouldn't be that long.
function verify() { // I created the function, which is called onclick on the button
  if (document.getElementById('password').value === 'PASSWORD') {
    document.getElementById('HIDDENDIV').classList.remove("hidden"); // Using class instead of inline CSS
    document.getElementById('credentials').classList.add("hidden"); // Hide the div containing the credentials
  } else {
    alert('Invalid Password!');
    password.setSelectionRange(0, password.value.length);
  }
  return false;
}

.hidden { /* Changed id selector to a class */
  display: none;
}

<div id="credentials">
  <!-- Added the parent div to be able to hide both the password, the button and even the <br> tag easily -->
  <input type="text" id="password" onkeydown="if (event.keyCode == 13) verify()" />
  <br/>
  <input id="button" type="button" value="Login" onclick="verify()" />
</div>
<div id="HIDDENDIV" class="hidden">bla</div><!-- Added class -->

Note that this is NOT a way to secure anything.
Just open the code viewer on any browser and you will see the “hidden” div.

changed

document.getElementById('table').classList.toggle('show')

to

document.getElementById('HIDDENDIV').style.display = 'block';

Seems like you have a lot of uneccesary code though

<input type="text" id="password" onkeydown="if (event.keyCode == 13) document.getElementById('button').click()" />
        <br/>
        <input id="button" type="button" value="Login" onclick="if (document.getElementById('password').value == 'PASSWORD') { 
document.getElementById('HIDDENDIV').style.display = 'block';   document.getElementById('passw').style.display='none'; } 
else {  alert('Invalid Password!'); password.setSelectionRange(0, password.value.length);   } " />

<div id="HIDDENDIV">bla</div>