CODEWITHSUNDEEP
javascripthtmlcss
Question
Question

Reputation: 15

Turn on or off tag display in html

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?

Upvotes: 0

Views: 515

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

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

Upvotes: 2

Related Questions