HTML and javascript input and function

Question

I am a new programer in js and I tried to do a basic website using js and html. I tried to do like username and password input boxes but the function of it doesn't work. What is the problem?

This is the code:

    function entering() {
    	alert("hi")
    	var username = document.getElementById("fuser");
    	var password = document.getElementById("fpass");
    	if (username == "f") {
    	if (password == "f") {
    	alert('Nice');
    	}else {
    	alert('wrong password');
    	}else{
    	alert('wrong username');}}
    
    	document.getElementById("frm1").submit();
    }

    <h1>Best Website</h1>
    <h2>Hello!<h2>
    		
    <form id = frm1>
    	Username: <input type = "text" id="fuser"><br>
    	Password: <input type = "text" id="fpass"><br>
    	<input type = "button" onclick = "entering()" value = "submit">
    
    	
    </form>

Luca Kiebel · Accepted Answer · 2018-05-04 16:33:45Z

4

What you are searching for is the value property of the input element.

var username = document.getElementById("fuser");
var password = document.getElementById("fpass");

Are only references to the elements in your page, not what the user entered, for that use

var username = document.getElementById("fuser").value;
var password = document.getElementById("fpass").value;

Complete Code:

function entering() {
    alert("hi")
    var username = document.getElementById("fuser").value;
    var password = document.getElementById("fpass").value;
    if (username == "f") {
      if (password == "f") {
        alert("correct");
      } else {
        alert("wrong password")
      }
    } else {
      alert("wrong username");
    }

    //document.getElementById("frm1").submit();
}

<h2>Hello!<h2>

<form id = frm1>
    Username: <input type = "text" id="fuser"><br>
    Password: <input type = "text" id="fpass"><br>
    <input type = "button" onclick = "entering()" value = "submit">


</form>

edited May 4, 2018 at 16:33

answered May 4, 2018 at 16:19

Luca Kiebel

10.1k7 gold badges34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Luca Kiebel Over a year ago

Your if statements also were a bit messed up, corrected that too.

zfrisch · Accepted Answer · 2018-05-04 16:19:53Z

0

var username = document.getElementById("fuser");
var password = document.getElementById("fpass");

When grabbing an input element, you get the element stored into a variable, not the value. When you write your if conditional then, you need to point to the property on the element called value.

if (username.value == "f") {
if (password.value == "f") {

answered May 4, 2018 at 16:19

zfrisch

8,6901 gold badge26 silver badges39 bronze badges

Comments

dkaramazov · Accepted Answer · 2018-05-04 16:25:27Z

You'll need to rework your if/else statements and make sure to access the value of the element you're referencing.

if (username == "f") {
if (password == "f") {
alert('Nice');
}else {
alert('wrong password');
}else{
alert('wrong username');}}

To:

if (username.value == "f") {
    if (password.value == "f") {
        alert('Nice');
    } else {
        alert('wrong password');
    }
} else {
    alert('wrong username');
 }

That should get you moving again.

<!DOCTYPE html>
<html>

<head>
    <title>The Best Website</title>
</head>

<body>

    <h1>Best Website</h1>
    <h2>Hello!
        <h2>

            <form id=frm1>
                Username:
                <input type="text" id="fuser">
                <br> Password:
                <input type="text" id="fpass">
                <br>
                <input type="button" onclick="entering()" value="submit">


            </form>

            <script>
                function entering() {
                    alert("hi")
                    var username = document.getElementById("fuser");
                    var password = document.getElementById("fpass");
                    if (username == "f") {
                        if (password == "f") {
                            alert('Nice');
                        } else {
                            alert('wrong password');

                        }
                    } else {
                        alert('wrong username');
                    }

                    document.getElementById("frm1").submit();
                }

            </script>

</body>

Collectives™ on Stack Overflow

HTML and javascript input and function

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related