title: Turn on or off tag display in html
body: <p>I have this CSS:</p>
  
  <pre><code>div.row{
      display: none;}
    div.login {
      height: 10em;
      align-items: center;
      display: flex;
      justify-content: center;
      margin: 0;
      top: 50%;}
  </code></pre>
  
  <p>this HTML:</p>
  
  <pre><code>&lt;div id="login" class="login"&gt;
    &lt;input type="password" style="width: 25%;" placeholder="Please enter your password"&gt;
    &lt;button onclick="logincheck()"&gt;Login&lt;/button&gt;
  &lt;/div&gt;
  &lt;div id ='row' class="row"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>and this JS:</p>
  
  <pre><code>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.');
     }
    }
  </code></pre>
  
  <p>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?</p>