How to get an input text value in JavaScript
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.
Do not use global variables in this way. Even if this could work, it's bad programming style. You can inadvertently overwrite important data in this way. Do this instead:
<script type="text/javascript"> function kk(){ var lol = document.getElementById('lolz').value; alert(lol); }</script>If you insist var lol to be set outside the function kk, then I propose this solution:
<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>Note that the script element must follow the input element it refers to, because elements are only queryable with getElementById if they already have been parsed and created.
Both examples work, tested in jsfiddler.
Edit: I removed the language="javascript" attribute, because it's deprecated. See W3 HTML4 Specification, the SCRIPT element:
Deprecated. This attribute specifies the scripting language of the contents of this element. Its value is an identifier for the language, but since these identifiers are not standard, this attribute has been deprecated in favor of type.
and
A deprecated element or attribute is one that has been outdated by newer constructs. […] Deprecated elements may become obsolete in future versions of HTML. […] This specification includes examples that illustrate how to avoid using deprecated elements. […]
<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>use this