简体   繁体   English

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

[英]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我的 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>

then adding some javascript code for just getting a username and password which enter in username and password field in html form.然后添加一些 javascript 代码来获取用户名和密码,这些用户名密码以 html 形式输入用户名密码字段。 my main.js code我的 main.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 的一点理解,但我需要帮助这个。

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<input type="text" id="Password" />具有上壳体P,而在JavaScript您正在以较低的字母p调用它。


Note:注意:

Problems in your javascript code are usually easy to find using the browser console to check for errors.使用浏览器控制台检查错误通常很容易找到 JavaScript 代码中的问题。 The error thrown here was:这里抛出的错误是:

Uncaught TypeError: Cannot read property 'value' of null未捕获的类型错误:无法读取 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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我如何使用JavaScript将jenkins数据获取到HTML页面 - How can I get jenkins data to an HTML page using javascript How can i convert my string output into the object so that i get json as a output using javascript? - How can i convert my string output into the object so that i get json as a output using javascript? 获取.json以使用Javascript在HTML页面上输出 - get the the .json to output on the HTML page using Javascript 如何使用angular和javascript使我的mlab数据库显示在我的html页面上? - How do I get my mlab db to show up on my html page using angular and javascript? 我如何才能在部分HTML页面上使用Javascript函数? - How can i get my Javascript function to work on a partial html page? 如何将我的 JavaScript 文件包含到 HTML 页面中? - How can I include my JavaScript file into an HTML page? 使用JavaScript如何在我的页面中插入HTML代码? - Using JavaScript how do I insert html code into my page? 如何使用HtmlUnit从JavaScript html页面获取结果? - How can I get the result from the JavaScript html page using HtmlUnit? 如何使用适用于Mac优胜美地的javascript automator(JAX)获取网页的原始html? - how can I get raw html for a web page using javascript automator (JAX) for mac yosemite? 如何摆脱HTML页面中的所有JavaScript? - How can I get rid of all JavaScript from an HTML page?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM