如何获得在JavaScript中输入文本值(How to get an input text val

2019-06-17 15:01发布

站内文章 / 前沿技术

14 0

走好不送

女 | 书童

私信

如何去获得在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是外面定义，是因为DOM是尚未加载时，JavaScript是第一次运行。正因为如此， 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来实现，但它更容易使用DOM库像jQuery的。

例如：

<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的。就绪（）带一个函数作为参数。该功能将被尽快DOM准备好运行。第二个例子还使用了。点击（）绑定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规范，SCRIPT元素：

语言 = CDATA [ CI ]
不推荐使用。该属性指定此元素的内容的脚本语言。它的值是语言的标识，但由于这些标识符不是标准，这个属性已经被弃用赞成类型。

和

甲弃用元素或属性是一个已过时由较新的构建体。 [...]弃用元素成为未来版本的HTML过时。 [...]本说明书包括其说明如何避免使用弃用元件的例子。 [...]

Answer 3:

请注意，这条线：

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已经（大部分）显示后进行处理。

Answer 4:

编辑：

移动你的JavaScript页面的结束，以确保DOM（HTML元素）访问它们（JavaScript来结束对快速加载）之前被加载。
声明变量总是使用VAR textInputVal =的document.getElementById（“textInputId”）值例如喜欢。
使用输入和元素描述性的名称（让我们很容易了解自己的代码，并当其他人正在寻找它）。
要了解更多关于的getElementById，请参阅： http://www.tizag.com/javascriptT/javascript-getelementbyid.php
如jQuery使用库使得使用JavaScript百倍容易，了解详情： http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

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

Answer 7:

作为你的笑是局部变量现在，它很好的做法，使用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>