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