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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (27)

怎样在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()如上所示,它不起作用,但当我把它放在里面时,它可以工作。谁能告诉我为什么?

提问于
用户回答回答于

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准备就绪(通常远早于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中内联。

用户回答回答于

不要以这种方式使用全局变量。即使这可以工作,但这是糟糕的编程风格。您可以通过这种方式无意中覆盖重要数据。改为:

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

language = cdata [CI] 已弃用。该属性指定了此元素内容的脚本语言。它的值是该语言的标识符,但由于这些标识符不是标准的,因此该属性已被弃用,以支持类型。

不赞成使用的元素或属性是由较新的构造过时的元素或属性。[...]已弃用的元素可能在未来的HTML版本中过时。[...]该规范包含了说明如何避免使用已弃用元素的示例。[...]

扫码关注云+社区