Question

我尝试使用两个输入（用户名和密码）和一个按钮（提交）创建一个表单。我的index.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>

然后添加一些javascript代码，只需获取以html格式输入用户名和密码字段的用户名和密码。我的main.js代码

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

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

Answer 1

id中的<input type="text" id="Password" />有一个大写 P ，而在javascript中，你用小写 p 来调用它。

<小时/> 注意：

通常可以使用浏览器控制台轻松查找javascript代码中的问题以检查错误。这里抛出的错误是：

未捕获的TypeError：无法读取null
的属性“value”

所以很明显，页面上不存在其中一个元素。

以下是更正后的代码：

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>

如何使用Javascript在我的HTML页面中输出

1 个答案: