如何获取 JavaScript 中的输入文本值
[英]How to get an input text value in JavaScript
问题描述
go如何获取JavaScript中的一个输入文本值？
<script language="javascript" type="text/javascript">
lol = document.getElementById('lolz').value;
function kk(){
alert(lol);
}
</script>
<body>
<input type="text" name="enter" class="enter" value="" id="lolz"/>
<input type="button" value="click" OnClick="kk()"/>
</body>
当我放lol = document.getElementById('lolz').value; 在 function kk()之外，如上所示，它不起作用，但是当我把它放在里面时，它起作用了。 谁能告诉我为什么？
13 个解决方案
解决方案1
73 已采纳 2012-08-04 18:32:45
当lol在它之外定义时，你的函数不起作用的原因是因为当 JavaScript 第一次运行时DOM还没有加载。 因此， getElementById将返回null （ 参见 MDN ）。
您已经找到了最明显的解决方案：通过在函数内部调用getElementById ，DOM 将在调用该函数时加载并准备就绪，并且会像您期望的那样找到元素。
还有其他一些解决方案。 一种是等到整个文档加载完毕，像这样：
<script type="text/javascript">
var lolz;
function onload() {
lolz = document.getElementById('lolz');
}
function kk(){
alert(lolz.value);
}
</script>
<body onload="onload();">
<input type="text" name="enter" class="enter" value="" id="lolz"/>
<input type="button" value="click" onclick="kk();"/>
</body>
注意<body>标签的onload属性。 （附带说明： <script>标签的language属性已被弃用。不要使用它。）
但是， onload存在一个问题：它会等待所有内容（包括图像等）都加载完毕。
另一种选择是等到 DOM 准备好（通常比onload早得多）。 这可以使用“普通”JavaScript 来完成，但使用像jQuery这样的 DOM 库要容易得多。
例如：
<script type="text/javascript">
$(document).ready(function() {
var lolz = $('#lolz');
var kk = $('#kk');
kk.click(function() {
alert(lolz.val());
});
});
</script>
<body>
<input type="text" name="enter" class="enter" value="" id="lolz"/>
<input type="button" value="click" id="kk" />
</body>
jQuery 的.ready()将函数作为参数。 该函数将在 DOM 准备好后立即运行。 第二个示例还使用.click()来绑定 kk 的onclick处理程序，而不是在 HTML 中进行内联。
解决方案2
15 2012-08-04 18:15:44
不要以这种方式使用全局变量。 即使这可行，也是糟糕的编程风格。 您可能会以这种方式无意中覆盖重要数据。 改为这样做：
<script type="text/javascript">
function kk(){
var lol = document.getElementById('lolz').value;
alert(lol);
}
</script>
如果你坚持在函数kk之外设置var lol ，那么我提出这个解决方案：
<body>
<input type="text" name="enter" class="enter" value="" id="lolz"/>
<input type="button" value="click" OnClick="kk()"/>
<script type="text/javascript">
var lol = document.getElementById('lolz');
function kk() {
alert(lol.value);
}
</script>
</body>
请注意， script元素必须跟在它所引用的input元素之后，因为只有在元素已经被解析和创建的情况下才可以使用getElementById查询元素。
两个例子都有效，在 jsfiddler 中测试过。
编辑：我删除了language="javascript"属性，因为它已被弃用。 参见W3 HTML4 规范，SCRIPT 元素：
已弃用。 此属性指定此元素内容的脚本语言。 它的值是语言的标识符，但由于这些标识符不是标准的，因此该属性已被弃用，以支持类型。
和
不推荐使用的元素或属性已被较新的构造过时。 […] 不推荐使用的元素在未来的 HTML 版本中可能会过时。 […] 该规范包括说明如何避免使用不推荐使用的元素的示例。 […]
解决方案3
8 2013-09-19 18:40:15
<script type="text/javascript">
function kk(){
var lol = document.getElementById('lolz').value;
alert(lol);
}
</script>
<body onload="onload();">
<input type="text" name="enter" class="enter" id="lolz" value=""/>
<input type="button" value="click" onclick="kk();"/>
</body>
用这个
解决方案4
7 2012-08-04 18:08:29
编辑：
- 将您的 javascript 移动到页面的末尾，以确保在访问它们之前加载 DOM（html 元素）（javascript 以结束快速加载）。
- 使用var textInputVal = document.getElementById('textInputId').value;始终像示例中一样声明您的变量。
- 为输入和元素使用描述性名称（更容易理解您自己的代码以及当其他人正在查看它时）。
- 要查看有关 getElementById 的更多信息，请参阅： http : //www.tizag.com/javascriptT/javascript-getelementbyid.php
- 使用 jQuery 等库使使用 javascript 变得容易一百倍，要了解更多信息： http : //docs.jquery.com/Tutorials : Getting_Started_with_jQuery
解决方案5
7 2012-08-04 18:19:16
请注意这一行：
lol = document.getElementById('lolz').value;
位于标记上的实际<input>元素之前：
<input type="text" name="enter" class="enter" value="" id="lolz"/>
您的代码被逐行解析，并且lol = ...行在浏览器知道具有 id lolz的输入的存在之前进行评估。 因此， document.getElementById('lolz')将返回null ，并且document.getElementById('lolz').value应该会导致错误。
在函数内移动那条线，它应该可以工作。 这样，该行只会在调用函数时运行。 并按照其他人的建议使用var ，以避免使其成为全局变量：
function kk(){
var lol = document.getElementById('lolz').value;
alert(lol);
}
您还可以将脚本移动到页面的末尾。 将所有脚本块移动到 HTML <body>的末尾是当今避免此类引用问题的标准做法。 它还倾向于加快页面加载速度，因为加载和解析需要很长时间的脚本是在（大部分）显示 HTML 之后处理的。
解决方案6
4 2017-04-10 04:07:59
如何在 JavaScript 中获取输入文本值
var textbox; function onload() { //Get value. textbox = document.getElementById('textbox'); } function showMessage() { //Show message in alert() alert("The message is: " + textbox.value); } <body onload="onload();"> <div> <input type="text" name="enter" class="enter" placeholder="Write something here!" value="It´sa wonderful day!" id="textbox"/> <input type="button" value="Show this message!" onClick="showMessage()" /> </div>
解决方案7
3 2012-08-04 18:16:06
由于您的 lol 现在是局部变量，因此使用 var 关键字来声明任何变量是一种很好的做法。
这可能对你有用：
function kk(){
var lol = document.getElementById('lolz').value;
alert(lol);
}
解决方案8
3 2014-06-05 06:51:30
以上所有解决方案都是有用的。 他们使用了这条线
lol = document.getElementById('lolz').value;
在函数function kk() 。
我的建议是，您可以从另一个函数fun_inside()调用该变量
function fun_inside() {
lol = document.getElementById('lolz').value;
}
function kk() {
fun_inside();
alert(lol);
}
当您构建复杂的项目时，它会很有用。
解决方案9
3 2014-09-10 09:55:48
<script>
function subadd(){
subadd= parseFloat(document.forms[0][0].value) + parseFloat(document.forms[0][1].value)
window.alert(subadd)
}
</script>
<body>
<form>
<input type="text" >+
<input type="text" >
<input type="button" value="add" onclick="subadd()">
</form>
</body>
解决方案10
3 2016-12-18 14:31:11
<input type="password"id="har">
<input type="submit"value="get password"onclick="har()">
<script>
function har() {
var txt_val;
txt_val = document.getElementById("har").value;
alert(txt_val);
}
</script>
解决方案11
1 2016-05-01 07:14:39
document.getElementById('id').value
解决方案12
0 2016-09-05 17:56:53
这不起作用的原因是变量不会随着文本框而改变。 当它最初运行代码时，它获取文本框的值，但之后它再也不会被调用。 但是，当您在函数中定义变量时，每次调用该函数时，变量都会更新。 然后它会提醒现在等于文本框输入的变量。
解决方案13
0 2022-04-13 16:37:12
您可以使用 JavaScript (e)事件 object 简单地获取值。
<body>
<form onsubmit="handleSubmit()">
<input type="text" name="name"/>
<input type="email" name="email"/>
<input type="password" name="password"/>
<input type="submit" value="Submit"/>
</form>
</body>
const handleSubmit = (e) =>
{
e.preventDefault(); // prevent reload while click submit button
const name = e.target.name.value;
const email = e.target.email.value;
const password = e.target.password.value;
// do something
}
如何在javascript中获取输入文本值
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.