66

如何在 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;函数外面时kk()，如上所示，它不起作用，但当我把它放在里面时，它就起作用了。谁能告诉我为什么？

4

12 回答 12

73

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>

注意标签的onload属性。（附带说明：标签的属性已弃用。不要使用它。）<body>language<script>

但是，有一个问题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 中内联。

于 2012-08-04T18:32:45.463 回答
15

不要以这种方式使用全局变量。即使这可行，这也是糟糕的编程风格。您可以通过这种方式无意中覆盖重要数据。改为这样做：

<script type="text/javascript">
   function kk(){
       var lol = document.getElementById('lolz').value;
       alert(lol);
   }
</script>

如果你坚持var lol要设置在函数kk之外，那么我提出这个解决方案：

<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 元素：

语言= cdata [ CI ]

已弃用。此属性指定此元素内容的脚本语言。它的值是语言的标识符，但由于这些标识符不是标准的，因此该属性已被弃用，取而代之的是类型。

和

不推荐使用的元素或属性是已被较新的构造过时的元素或属性。[…] 不推荐使用的元素可能会在 HTML 的未来版本中过时。[…] 本规范包括说明如何避免使用已弃用元素的示例。[…]

于 2012-08-04T18:15:44.810 回答
8 
<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>

用这个

于 2013-09-19T18:40:15.753 回答
7

编辑：

  1. 将您的 javascript 移动到页面末尾，以确保在访问它们之前加载 DOM（html 元素）（javascript 结束以进行快速加载）。
  2. 使用var textInputVal = document.getElementById('textInputId').value;
  3. 对输入和元素使用描述性名称（更容易理解您自己的代码以及其他人正在查看它时）。
  4. 要了解有关 getElementById 的更多信息，请参阅：http ://www.tizag.com/javascriptT/javascript-getelementbyid.php
  5. 使用诸如 jQuery 之类的库使使用 javascript 变得容易上百倍，要了解更多信息：http://docs.jquery.com/Tutorials: Getting_Started_with_jQuery
于 2012-08-04T18:08:29.917 回答
7

请注意这一行：

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 （大部分）显示之后处理的。

于 2012-08-04T18:19:16.267 回答
4

如何在 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´s a wonderful day!" id="textbox"/>
<input type="button" value="Show this message!" onClick="showMessage()" />
</div>

于 2017-04-10T04:07:59.523 回答
3

由于您的大声笑现在是局部变量，因此使用 var 关键字声明任何变量的好习惯。

这可能对你有用：

function kk(){
  var lol = document.getElementById('lolz').value;
  alert(lol);
}
于 2012-08-04T18:16:06.883 回答
3

上述所有解决方案都很有用。他们用这条线

lol = document.getElementById('lolz').value;

函数里面function kk()。

我的建议是，您可以从另一个函数中调用该变量fun_inside()

function fun_inside() {    
    lol = document.getElementById('lolz').value;
}
function kk() {
    fun_inside();
    alert(lol);
}

当您构建复杂的项目时，它会很有用。

于 2014-06-05T06:51:30.267 回答
3 
<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>
于 2014-09-10T09:55:48.250 回答
3 
<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>
于 2016-12-18T14:31:11.620 回答
1

document.getElementById('id').value

于 2016-05-01T07:14:39.953 回答
0

这不起作用的原因是变量不会随文本框而改变。当它最初运行代码时，它会获取文本框的值，但之后不再调用它。但是，当您在函数中定义变量时，每次调用函数时变量都会更新。然后它会提醒现在等于文本框输入的变量。

于 2016-09-05T17:56:53.523 回答