JavaScript: 将密码设置为特定 div

JavaScript: Making password to a spesefic div

我正在做一些事情,但我现在没有任何代码,因为我不知道该怎么做!请帮帮我 :D

我觉得如果我能设置一个改变我风格的密码就好了:

<html>
<head>
<style>
    .passwordProtected {
       display:none; <- this is supposed to change to "block" when the password is written in, and they click "Show div"
    }
</style>
</head>
<body>
    <div id="loginArea">
        <input type="password"> <--- This is where they type the password
    </div>
    <div id="passwordprotected" class="passwordProtected">
         <h1>This is the protected div they enter</h1>
    </div>
</body>
</html>

我该怎么办?

如果我没理解错的话,代码应该是这样的:

<html>
<head>
<style>
    .passwordProtected {
       display:none;
    }
</style>
</head>
<body>
    <div id="loginArea">
        <input type="password">
        <button onclick='showDiv();'>Show div</button>
    </div>
    <div id="passwordprotected" class="passwordProtected">
         <h1>This is the protected div they enter</h1>
    </div>
    <script type="text/javascript">
    function showDiv(){
      var myDiv = document.querySelector('.passwordProtected');
       myDiv.style.display = 'block';
     }
    </script>
</body>
</html>

您可以在此处找到有关 JavaScript 样式的更多信息:http://www.w3schools.com/jsref/dom_obj_style.asp