Question

我想输入单词PASSWORD以及HIDDENDIV内的内容来显示。

有人能告诉我哪里出错了吗？

＆＃13;

#HIDDENDIV {
    display: none;
}

＆＃13;

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

＆＃13;

Answer 1

由于您通过基于id的CSS选择器隐藏了内容，因此稍后向其添加“show”CSS类将不会覆盖您已设置的id规则。（阅读 this ，了解不同的CSS选择器如何更具体，因此更难以覆盖。）

这是一个简单的例子：

#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>

因此，首先，使用CSS类而不是基于id的选择器设置要隐藏的内容，然后，您可以删除该类 - 不需要额外的“show”类。

接下来，在您的代码中，您有div id HIDDENDIV，但您的代码会尝试获取并显示id table的元素1}}。我假设在发布这个问题时这只是一个错字，实际上，你真的要有一个表来展示，但你需要纠正它。

此外，您不应该使用HTML内联事件属性。这是我们在20多年前进行事件处理之前我们制定标准的方式，不幸的是，这种技术是如此普遍，以至于它不会死于它应得的死亡。 There are a variety of reasons not to use them. 相反，请使用现代标准和最佳做法，并在分离的JavaScript中完成所有事件处理。

您还需要在尝试选择密码字段中的所有文本之前添加一行，以便为该元素提供焦点，否则选择代码将无效（请参阅下面的代码）。

// 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>

备注：

请记住，虽然此代码可以“正常工作”，但任何人都可以打败这个代码非常容易只需查看源代码即可。至真正保护内容在没有正确的情况下被消费提供的凭据，您需要实现服务器端溶液

就像不再需要内联脚本一样，同样可以说使用XHTML自终止标记语法（即<br />， <input />）。这也是一个不会消失的旧语法。的 Here's why you don't need and shouldn't use this syntax.

Answer 2

我修改并清理了您的代码以获取此工作代码段：
（参见我在代码中的评论）

＆＃13;

// 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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

请注意，这不是保护任何东西的方法只需在任何浏览器上打开代码查看器，您就会看到“隐藏”div。

Answer 3

改变

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

到

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

好像你有很多不成功的代码

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

输入密码以显示div的内容

3 个答案: