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

Question

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

我尝试创建一个带有两个输入(用户名和密码)和一个按钮(提交)的表单.我的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>

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Iva*_*n86 7

该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);
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，4 月前
查看次数：	97 次
最近记录：	8 年，4 月前