打开或关闭HTML中的标签显示

Question

I have this CSS:

div.row{
    display: none;}
  div.login {
    height: 10em;
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0;
    top: 50%;}

this HTML:

<div id="login" class="login">
  <input type="password" style="width: 25%;" placeholder="Please enter your password">
  <button onclick="logincheck()">Login</button>
</div>
<div id ='row' class="row">...</div>

and this JS:

function logincheck(){

   var pwd = document.getElementById('pw').value;
   var curpwd = 'somevalue';
   if(pwd === curpwd){
     alert('You are now logged in!');
     var mainpage = document.getElementById("row");
     var logger = document.getElementById("login");
     logger.style.display = "none !important";
     mainpage.style.display = "block";

  }else{
      alert('Sorry the password was not recognized, please try again.');
   }
  }

Yet my page remains the same after the 'You are now logged in' window. How do I make the login div disappear and make the row div appear? Also, the script works in chrome but now in explorer. Why?

Answer 1

You are assigning pwd to the DOM element #pw , yet no element has such an ID. Your first step would be to add an ID of pw to the <input> element.

After this, all you need to do is change your style.display value for logger . You have the right idea, though please note that a value of none !important is invalid in JavaScript. Instead, simply go with none . This works, and the !important declaration is generally frowned anyway upon due to its maximum level of specificity .

In addition to the note about !important , please note that it's also bad practice to use inline event handlers such as onclick= . I've updated this to use .addEventListener() in my example:

 var button = document.querySelector('#login button'); button.addEventListener("click", logincheck); function logincheck() { var pwd = document.getElementById('pw').value; var curpwd = 'somevalue'; if (pwd === curpwd) { alert('You are now logged in!'); var mainpage = document.getElementById("row"); var logger = document.getElementById("login"); logger.style.display = "none"; mainpage.style.display = "block"; } else { alert('Sorry the password was not recognized, please try again.'); } } 

 div.row { display: none; } div.login { height: 10em; align-items: center; display: flex; justify-content: center; margin: 0; top: 50%; } 

 <div id="login" class="login"> <input id="pw" type="password" style="width: 25%;" placeholder="Please enter your password"> <button>Login</button> </div> <div id='row' class="row">...</div> 

Finally, please be aware that all front-end JavaScript is visible to users , even when obsfuscated. As such, any visitor to this page will know that the password is somevalue . If this is for a secure page, you probably want to make use of a database and proper encryption instead of relying on front-end JavaScript.

Hope this helps :)