S. A. S. A. - 15 days ago 5
CSS Question

log in webpage -> <div> and comparing user input

I am trying to create a simple log in webpage. But my page is not being rendered as I expect it to be.

Here is my code:



function logIn(username, password){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if(username == "a" && password == "a"){
window.location.href="awesomePage.html";
}else{
alert("Incorrect username or password!");
}
}

#user {
position: absolute;
top: 10px;
left: 5px;
}
#pass {
position: absolute;
top: 40px;
left: 7.5px;
}
#username {
position: absolute;
top: 5px;
left: 40px;
}
#password {
position: absolute;
top: 20px;
left: 40px;
}
#logIn {
position: absolute;
top: 75px;
left: 80px;
}

<form action="javascript:logIn(username, password);" method="post">
<div id="user"> Username: </div>
<div id="username">
<input type="text" id="username" placeholder="Enter username here." />
</div>
<div id="pass"> Password: </div>
<div id="password">
<input type="password" id="password" placeholder="Enter password here." />
</div>
<div id="logIn">
<input type="button" value="Log In" onClick="javascript:logIn(username, password);"/>
</div>
</form>





Before, when I typed a for username and a for password and I clicked log in I got the alert message: Incorrect username or password.



I tried changing the HTML to (other code remains the same):

<div id="un"> <input type="text" id="username" placeholder="Enter username here." /> </div>
<div id="pw"> <input type="password" id="password" placeholder="Enter password here." /> </div>


And therefore changing the CSS to (other code remains the same):

#un {
position: absolute;
top: 5px;
left: 40px;
}
#pw {
position: absolute;
top: 20px;
left: 40px;
}


When I type a for username and a for password it takes me to awesomePage.html, but the input fields are positioned where I don't want them to be.

enter image description here

My question is: How do I fix this?

Also, another small question: Should I name other pages I have: awesomePage.html or awesome_page.html, or is Awesome Page.html just fine?

Answer

Just to solve your problem with minimum changes in code:
I have just did a small change in the css and another small change in the html IDs, which keep everything looks the same and functional.
For sure you can improve this a lot by not depending on positions as previous answers listed.

function logIn(){
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    debugger;
    if(username == "a" && password == "a"){
        window.location.href="awesomePage.html";
    }else{
        alert("Incorrect username or password!");
    }
}
#user {
    position: absolute;
    top: 10px;
    left: 5px;
}
#pass {
    position: absolute;
    top: 40px;
    left: 7.5px;
}
#username-ctr, #username {
    position: absolute;
    top: 5px;
    left: 40px;
}
#password-ctr, #password {
    position: absolute;
    top: 20px;
    left: 40px;
}
#logIn {
    position: absolute;
    top: 75px;
    left: 80px;
}
<form action="javascript:logIn(username, password);" method="post">
  <div id="user"> Username: </div>
  <div id="username-ctr"> 
    <input type="text" id="username" placeholder="Enter username here." /> 
  </div>
  <div id="pass"> Password: </div>
  <div id="password-ctr"> 
    <input type="password" id="password" placeholder="Enter password here." /> 
  </div>
  <div id="logIn"> 
    <input type="button" value="Log In" onClick="logIn()"/> 
  </div>
</form>

Comments