Menu
How go get an input text value in 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; outside of the function kk(), like shown above, it doesn't work, but when I put it inside, it works. Can anyone tell me why?
978
Answer: Use the value Property You can simply use the value property of the DOM input element to get the value of text input field. The following example will display the entered text in the input field on button click using JavaScript.
Using HTML forms, you can easily take user input. The <form> tag is used to get user input, by adding the form elements. Different types of form elements include text input, radio button input, submit button, etc. Let's learn about the <input> tag, which helps you to take user input using the type attribute.
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. Because of that, getElementById will return null (see 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.
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. (On a side note: the language attribute of the <script> tag is deprecated. Don't use it.)
There is, however, a problem with onload: it waits until everything (including images, etc.) is loaded.
The other option is to wait until the DOM is ready (which is usually much earlier than onload). This can be done with "plain" JavaScript, but it's much easier to use a DOM library like jQuery.
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. The function will be run as soon as the DOM is ready. This second example also uses .click() to bind kk's onclick handler, instead of doing that inline in the HTML.
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
