如何使用Javascript在HTML页面中获取输出

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

我尝试用两个输入(用户名和密码)和一个按钮(提交)创建一个表单。我的指数。html代码

<!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

然后添加一些javascript代码来获取用户名和密码，并以html形式输入用户名和密码字段。我的主。js代码

 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.

但我没有得到任何警报。我试图找出原因，但我不明白为什么我的代码不能工作。当我在互联网上搜索的时候，我发现了一些相关的帖子，但不幸的是它并没有帮助我，这可能是我对javascript的理解不够，但是我需要帮助。

1 个解决方案

#1

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.

中的id有大写的P，而在javascript中，你用小写的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:

使用浏览器控制台检查错误通常很容易发现javascript代码中的问题。这里抛出的错误是:

Uncaught TypeError: Cannot read property 'value' of null

未捕获的TypeError:不能读取null的属性值。

so it was immediately obvious that one of the elements don'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>

#1