如何在JavaScript中获取input文本值

如何获得JavaScript中的input文本值?

<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时候,你的function不起作用的原因是JavaScript第一次运行的时候DOM没有加载。 因此, getElementById将返回null ( 请参阅MDN )。

你已经find了最明显的解决scheme:通过在函数内部调用getElementById在调用该函数的时候DOM将被加载并准备好,并且元素将被find,就像你所期望的那样。

还有其他一些解决scheme。 一个是等到整个文档被加载,如下所示:

 <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有一个问题:它会一直等到所有东西 (包括图像等)被加载。

另一种select是等待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准备就绪,该function就会运行。 第二个例子也使用.click()绑定kk的onclick处理程序,而不是在HTML中内联。

不要以这种方式使用全局variables。 即使这可以工作,这是糟糕的编程风格。 您可以以这种方式无意中覆盖重要的数据。 做这个,而不是:

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

如果你坚持把variables设置在函数kk之外,那么我提出这个解决scheme:

 <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元素,因为如果元素已经被分析和创build,元素只能用getElementById查询。

这两个例子工作,在jsfiddlertesting。

编辑 :我删除了language="javascript"属性,因为它已经被弃用了。 请参阅W3 HTML4规范,SCRIPT元素 :

language = cdata [ CI ]

已弃用 。 这个属性指定了这个元素的内容的脚本语言。 它的值是该语言的标识符,但是由于这些标识符不是标准的,所以该属性已被弃用而偏爱types。

弃用的元素或属性是由较新的构造过时的元素或属性。 弃用的元素可能会在将来的HTML版本中过时。 本规范包含了一些示例,说明如何避免使用已弃用的元素。 […]

注意这一行:

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

在标记上的实际<input>元素之前:

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

你的代码被逐行parsing,并且在浏览器知道ID为lolz的input的存在之前计算lol = ...行。 因此, document.getElementById('lolz')将返回null ,而document.getElementById('lolz').value应该会导致错误。

在函数内移动该行,它应该工作。 这样,该行将只在调用该函数时运行。 并使用其他人build议,以避免使其成为一个全局variables:

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

您也可以将脚本移动到页面的末尾。 将所有脚本块移到HTML <body>的末尾是今天的标准做法,以避免这种参考问题。 它也往往加快页面加载速度,因为需要很长时间才能加载和parsing的脚本在HTML(大部分)被显示之后被处理。

编辑:

  1. 移动你的JavaScript到页面结束,以确保DOM(HTML元素)加载之前访问它们(JavaScript结束快速加载)。
  2. 声明你的variables总是像在例子中使用var textInputVal = document.getElementById('textInputId').value;
  3. 使用input和元素的描述性名称(使得更容易理解自己的代码,以及其他人在查看时)。
  4. 要了解关于getElementById的更多信息,请参阅: http : //www.tizag.com/javascriptT/javascript-getelementbyid.php
  5. 使用像jQuery这样的库,使得使用JavaScript的时间更容易上百倍,以了解更多: http : //docs.jquery.com/Tutorials : Getting_Started_with_jQuery
 <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> 

用这个

因为你的lol现在是局部variables,所以最好使用var关键字来声明任何variables。

这可能适合你:

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

以上所有解决scheme都是有用的。 他们使用行lol = document.getElementById('lolz').value; 内函数function kk()

我build议的是,你可以从另一个函数fun_inside()调用该variables

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

当你build立复杂的项目时它会很有用。

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

的document.getElementById( 'ID')。值

这是行不通的原因是因为该variables不会改变与文本框。 当它最初运行代码时,它将获得文本框的值,但之后不会再被调用。 但是,当在函数中定义variables时,每次调用函数时variables都会更新。 然后它提醒现在等于文本框input的variables。

如何在JavaScript中获取input文本值

  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>