Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
288 views
in Technique[技术] by (71.8m points)

javascript - 如何在JavaScript中获取输入文本值(How to get an input text value in JavaScript)

How go get an input text value in JavaScript?(如何在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> When I put lol = document.getElementById('lolz').value;(当我把lol = document.getElementById('lolz').value;) outside of the function kk() , like shown above, it doesn't work, but when I put it inside, it works.(在函数kk()外部,如上所示,它不起作用,但是当我将其放入其中时,它可以工作。) Can anyone tell me why?(谁能告诉我为什么?)   ask by Maria translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

The reason you function doesn't work when lol is defined outside it, is because the DOM isn't loaded yet when the JavaScript is first run.(在函数库外部定义lol时,您的函数无法使用的原因是,在首次运行JavaScript时尚未加载DOM 。)

Because of that, getElementById will return null ( see MDN ).(因此, getElementById将返回null请参见MDN )。) You've already found the most obvious solution: by calling getElementById inside the function, the DOM will be loaded and ready by the time the function is called, and the element will be found like you expect it to.(您已经找到了最明显的解决方案:通过在函数内部调用getElementById ,将在调用函数时加载DOM并准备就绪,并且将按您期望的方式找到该元素。) There are a few other solutions.(还有其他一些解决方案。) One is to wait until the entire document is loaded, like this:(一种是等到整个文档加载完毕,如下所示:) <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> Note the onload attribute of the <body> tag.(注意<body>标签的onload属性。) (On a side note: the language attribute of the <script> tag is deprecated. Don't use it.)((附带说明:已弃用<script>标记的language属性。请勿使用它。)) There is, however, a problem with onload : it waits until everything (including images, etc.) is loaded.(但是, onload存在一个问题:它等待直到所有内容 (包括图像等)都被加载。) The other option is to wait until the DOM is ready (which is usually much earlier than onload ).(另一个选择是等待DOM准备就绪(通常比onload早得多)。) This can be done with "plain" JavaScript, but it's much easier to use a DOM library like jQuery .(可以使用“普通” JavaScript来完成,但是使用jQuery之类的DOM库要容易得多。) For example:(例如:) <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's .ready() takes a function as an argument.(jQuery的.ready()将函数作为参数。) The function will be run as soon as the DOM is ready.(该功能将在DOM准备就绪后立即运行。) This second example also uses .click() to bind kk's onclick handler, instead of doing that inline in the HTML.(第二个示例还使用.click()绑定kk的onclick处理程序,而不是在HTML中进行内联。)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...