How can i get output in my HTML page using Javascript

Question

I'm try to create a form with two input (Username and password) and one button(submit). my index.html code

<!DOCTYPE html>
<html>
<head>
    <title>login</title>
</head>
<body>
     <form>
        <p>username</p>
        <input type="text" id="username" />
        <p>Password</p>
        <input  type="text" id="Password" /><br>
        <button type="button" onclick="getinfo()">submit</button>
     </form>
     <script src="main.js"></script>
</body>
</html>

then adding some javascript code for just getting a username and password which enter in username and password field in html form. my main.js code

 function getinfo(){
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        alert("Name = " + username + "password = " + password);
    }

But i don't getting any alert. i'm try to find out but i can't understand why my code is not working.when i search internet i find some related post but unfortunately it did not help,it's maybe for my little understanding in javascript , but i need help about this.

Check your console for errors

Patrick Evans
– Patrick Evans

2018-01-28 21:18:45 +00:00
Commented Jan 28, 2018 at 21:18 — Patrick Evans
– Patrick Evans, Commented Jan 28, 2018 at 21:18

Ivan86 · Accepted Answer · 2020-10-05 05:18:55Z

8

The id in <input type="text" id="Password" /> has an upper case P, while in javascript you are calling it with a lower case p.

Note:

Problems in your javascript code are usually easy to find using the browser console to check for errors. The error thrown here was:

Uncaught TypeError: Cannot read property 'value' of null

so it was immediately obvious that one of the elements doesn't exist on the page.

Here is the corrected code:

function getinfo() {
   var username = document.getElementById("username").value;
   var password = document.getElementById("password").value;
   alert("Name = " + username + " password = " + password);
}

<!DOCTYPE html>
<html>
<head>
    <title>login</title>
</head>
<body>
     <form>
        <p>username</p>
        <input type="text" id="username" value="" />
        <p>Password</p>
        <input type="text" id="password" value="" /><br>
        <button type="button" onclick="getinfo()">submit</button>
     </form>
     <script src="main.js"></script>
</body>
</html>

edited Oct 5, 2020 at 5:18

answered Jan 28, 2018 at 21:21

Ivan86

5,7182 gold badges16 silver badges30 bronze badges

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

4 Comments

random_user_name Over a year ago

Good answer. I would also recommend taking the opportunity to teach. OP might benefit from some tips on using the browser console and other troubleshooting techniques.

Ivan86 Over a year ago

@cale_b You are right, I will edit to include that too. Thanks

Rafsan Over a year ago

when i'm getting my answer then i'm going to mark it as the accepted answer but it's may need some time then i'm waiting and now it's marked as accepted !

Sabbir Hassan Over a year ago

I know this question is already answered but just wanted to share this basic but important lesson. One best way to find errors is to go to inspect or debug window. I think most browsers accept F12. Check console log for errors and also you can check network for any xhr/xmlhttp log.

Collectives™ on Stack Overflow

How can i get output in my HTML page using Javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related