Question

如何在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()之外时，如上所示，它不起作用，但当我把它放入其中时，它可以工作。谁能告诉我为什么？

Answer 1

如果在其外部定义lol，则您运行的原因不起作用，原因是首次运行JavaScript时尚未加载DOM。因此，getElementById将返回null（see 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中进行内联。

Answer 2

不要以这种方式使用全局变量。即使这可行，但编程风格也不好。您可能会以这种方式无意中覆盖重要数据。这样做：

<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 Specification, the SCRIPT element：

语言 = cdata [CI]


Deprecated。此属性指定此元素内容的脚本语言。它的值是该语言的标识符，但由于这些标识符不是标准的，因此该属性已deprecated支持类型。

和

不推荐使用的元素或属性是新构造过时的元素或属性。 [...]在将来的HTML版本中，不推荐使用的元素可能会过时。 [...]此规范包含说明如何避免使用弃用元素的示例。 [...]

Answer 3

修改：

将您的javascript移动到页面的末尾以确保在访问它们之前加载DOM（html元素）（javascript结束以便快速加载）。
使用 var textInputVal = document.getElementById（＆＃39; textInputId＆＃39;）。值;
为输入和元素使用描述性名称（使您更容易理解自己的代码以及其他人正在查看代码时）。
要了解有关getElementById的更多信息，请参阅：http://www.tizag.com/javascriptT/javascript-getelementbyid.php
使用jQuery这样的库可以更轻松地使用javascript数百次了解更多信息：http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

Answer 4

请注意这一行：

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

位于标记上的实际<input>元素之前：

<input type="text" name="enter" class="enter" value="" id="lolz"/>

您的代码将逐行解析，并且在浏览器知道ID为lol = ...的输入存在之前评估lolz行。因此，document.getElementById('lolz')将返回null，而document.getElementById('lolz').value会导致错误。

在函数内移动该行，它应该可以工作。这样，该行只会在调用函数时运行。并像其他人建议的那样使用var，以避免使其成为全局变量：

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

您还可以将脚本移动到页面末尾。将所有脚本块移动到HTML <body>的末尾是当前的标准做法，以避免此类引用问题。它还会加速页面加载，因为在（大部分）显示HTML之后处理需要很长时间加载和解析的脚本。

Answer 5

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

使用此

Answer 6

如何在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>

Answer 7

因为你的lol现在是局部变量，所以使用var关键字来声明任何变量是一种很好的做法。

这可能适合你：

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

Answer 8

以上所有解决方案都很有用。他们在函数lol = document.getElementById('lolz').value;中使用了行function kk()。

我的建议是，你可以从另一个函数fun_inside()

中调用该变量

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

在构建复杂项目时非常有用。

Answer 9

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

Answer 10

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

Answer 11

的document.getElementById（ 'ID'）。值

Answer 12

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

如何在JavaScript中获取输入文本值

12 个答案: