{"id":19913,"date":"2022-11-08T03:01:17","date_gmt":"2022-11-07T21:31:17","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-enter-password-to-display-content-of-div\/"},"modified":"2022-11-08T03:01:17","modified_gmt":"2022-11-07T21:31:17","slug":"solved-enter-password-to-display-content-of-div","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-enter-password-to-display-content-of-div\/","title":{"rendered":"[Solved] Enter password to display content of div"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

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

Here’s a quick example:<\/p>\n<\/p>\n

\n
\n
#d1 { display:none; }    \/* Will override most other selectors *\/\r\ndiv { display:block; }   \/* Won't work *\/\r\n.show { display:block; } \/* Won't work *\/<\/code><\/pre>\n
<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>\r\n<div id=\"d1\" class=\"show\">Hello?!<\/div><\/code><\/pre>\n<\/div>\n<\/div>\n
So, first, set the content to be hidden with a CSS class instead of an id<\/code> based selector, then later, you can just remove that class – no extra “show” class is needed.  <\/p>\n
Next, in your code you have a div<\/code> with an id<\/code> of HIDDENDIV<\/code>, but your code attempts to get and show an element with an id<\/code> of table<\/code>. 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.<\/p>\n
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.<\/strong> Instead, use modern standards and best-practices and do all of your event handling in separated JavaScript.<\/p>\n
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).<\/p>\n<\/p>\n
\n
\n
\/\/ Get references to the elements you'll be working with\r\nvar input = document.getElementById(\"password\");\r\nvar div = document.getElementById(\"HIDDENDIV\");\r\nvar btn = document.getElementById(\"button\");\r\n\r\n\/\/ Set up event handlers in JavaScript\r\nbutton.addEventListener(\"click\", validate);\r\n\r\nfunction validate(){\r\n  if (input.value == 'PASSWORD') { \r\n     \/\/ No need to add a \"show\" class. Just remove the \"hidden\" class.\r\n     div.classList.remove('hidden');\r\n     \r\n     \/\/ Or, add it:\r\n     input.classList.add(\"hidden\");\r\n  } else {  \r\n     password.focus(); \/\/ <-- If you don't do this first, your select code won't work\r\n     password.setSelectionRange(0, password.value.length);   \r\n     alert('Invalid Password!'); \r\n  }\r\n}\r\n\r\ninput.addEventListener(\"keydown\", function(event){\r\n if (event.keyCode === 13){\r\n   \/\/ No reason to simulate a button click. Just call the code that needs to be run.\r\n   validate();\r\n }\r\n});<\/code><\/pre>\n
\/* You only need to apply this to elements that should be hidden and\r\n   then simply remove this class from hidden elements to show them. *\/\r\n.hidden { display: none; }<\/code><\/pre>\n
<input type=\"text\" id=\"password\">\r\n<br>\r\n<input id=\"button\" type=\"button\" value=\"Login\">\r\n<div id=\"HIDDENDIV\" class=\"hidden\">bla<\/div><\/code><\/pre>\n<\/div>\n<\/div>\n
NOTES:<\/strong><\/p>\n