Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can i get output in my HTML page using Javascript

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.

like image 308
Rafsan Avatar asked Mar 16 '26 04:03

Rafsan


1 Answers

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>
like image 166
Ivan86 Avatar answered Mar 18 '26 19:03

Ivan86



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!