如何在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(大部分)被显示之后被处理。
编辑:
- 移动你的JavaScript到页面结束,以确保DOM(HTML元素)加载之前访问它们(JavaScript结束快速加载)。
- 声明你的variables总是像在例子中使用var textInputVal = document.getElementById('textInputId').value;
- 使用input和元素的描述性名称(使得更容易理解自己的代码,以及其他人在查看时)。
- 要了解关于getElementById的更多信息,请参阅: http : //www.tizag.com/javascriptT/javascript-getelementbyid.php
- 使用像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>