Can somebody help me with a non functioning javascript code for the most unsafe login page?

Question

I need to make a login page on my website with the html and JavaScript.
This is what I have tried so far

    </div>
      <ul class="login-list">
        <li><h2>Member login</h2></li>
        <li><input type="text" name="Username" placeholder="Username"></li>
        <li><input type="password" name="Password" placeholder="Password"></li>
        <li><input type="button" onclick="login();" name="Login" value="Login"></li>
        <li>Forgot Password?</li>
      </ul>
    </div>

  <script language="javascript">
  function login() {
    if(li.Username.value == "admin" && li.Password.value == "welcome")
    {
      window.open('dashboard.html')
    }
    else {
      alert("The username and password don not match.")
    }
  }
  </script>

Also, I am very much aware of this being the most unsafe way of creating a login page but it does not really matter for my purpose.
I would like for it to output an alert if the input is wrong. When the input is right I want it to route the user to the dashboard.html file.

The JavaScript variable `li` is not defined in your code that I can see. — , Sep 12 '19 at 19:16
Are you getting errors in your console? Please tell us what they are. — , Sep 12 '19 at 19:18
start from https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName — zod, Sep 12 '19 at 19:29
Hello and welcome to StackOverflow. This question could be clearer. You've shown your work, which is great, but you haven't explained what's wrong. We shouldn't have to run your code to see what the problem is: you should tell us. — DavidS, Sep 12 '19 at 20:30

olminkow · Answer 1 · 2019-09-12T19:34:01.940

2

You are trying to access the text in the input element incorrectly. You should try:

var userName = document.getElementsByName('Username')[0].value;
var passWord = document.getElementsByName('Password')[0].value;
 if(userName == "admin" && passWord == "welcome")
    {
      window.open('dashboard.html')
    }
    else {
      alert("The username and password don not match.")
}

document.getElementsByName() returns a NodeList, so you have to access it by an index: document.getElementsByName('staff_counter')[0] (depending on how many of these you have). Refrence

You're referencing the first element in that NodeList of that name that is why its [0]

edited Sep 12 '19 at 19:34

answered Sep 12 '19 at 19:22

olminkow

121
13

why is the [0] ? – zod Sep 12 '19 at 19:28
2

`document.getElementsByName()` returns a NodeList, so you have to access it by an index: `document.getElementsByName('staff_counter')[0]` (depending on how many of these you have). [Refrence](https://stackoverflow.com/questions/6967297/getelementsbyname-not-working) You're refrencing the first element in that nodelist of that name. – olminkow Sep 12 '19 at 19:31
I have changed my function to the above. When pressing the "login" i still do not get the alarm message with the wrong input nor a redirect to "dashboard.html" on giving the correct username and password. – Oniwithatoothpick Sep 12 '19 at 20:35
I would need to see the rest of your code. When does that function run? Where is your event listener? What's your code for your login button? Is it something along these lines? ` – olminkow Sep 12 '19 at 20:39

Timetrax · Accepted Answer · 2019-09-13T21:56:32.597

The code below may be more helpful incase you plan to implement actual server side logic. it will also work great for your demo. I tried to minimize the css use

    <!DOCTYPE html>
    <html>
    <head>
    <title>Login Page</title>
    </head>
    <style type="text/css">
    div{
        border: 5px solid white;
        margin:20px;
        width: 252px; 
    }
    .page_center{
        width: 300px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    </style>
    <body>
     <div class="page_center">
       <div>
        <form action="" method="">
         <table>
          <tr>
           <td>Username</td>
           <td><input type="text" name="username_input" placeholder="username"></td>
          </tr>
          <tr>
           <td>Password</td>
           <td><input type="password" name="password_input" placeholder="password"></td>
          </tr>
         </table>  
        </form>
       </div>
    
       <div style="text-align: center;">
        <input type="submit" name="submit_button" value="Login" onclick="Login()">
       </div>
    
       <div style="text-align: center;">
        <a href="#">Forgot Password?</a>  
       </div>    
    </div>
    
    <script type="text/javascript">
    
    function Login(){    
     var username = document.getElementsByName("username_input")[0].value;
     var password = document.getElementsByName("password_input")[0].value;
 
     if (username == "admin" && password == "welcome") {
      window.open('dashboard.html')
     }else {
      alert("The username and password do not match.");
     }
    }    
    </script>    
    </body>
    </html>

Can somebody help me with a non functioning javascript code for the most unsafe login page?

2 Answers2