How to get an input text value in JavaScript

2019-01-04 22:54发布

站内问答 / JavaScript
905 12 6

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?

12条回答
smile是对你的礼貌
2楼-- · 2019-01-04 23:41

Edit:

  1. Move your javascript to end of the page to make sure DOM (html elements) is loaded before accessing them (javascript to end for fast loading).
  2. Declare your variables always like in example using var textInputVal = document.getElementById('textInputId').value;
  3. Use descriptive names for inputs and elements (makes easier to understand your own code and when someone other is looking it).
  4. To see more about getElementById, see: http://www.tizag.com/javascriptT/javascript-getelementbyid.php
  5. Using library such as jQuery makes using javascript hundred times easier, to learn more: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
查看更多
0人赞 添加讨论(0) 举报
傲
3楼-- · 2019-01-04 23:42

as your lol is local variable now, its good practice to use var keyword for declaring any variables.

this may work for you :

function kk(){
  var lol = document.getElementById('lolz').value;
  alert(lol);
}
查看更多
0人赞 添加讨论(0) 举报
来，给爷笑一个
4楼-- · 2019-01-04 23:53

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.

查看更多
0人赞 添加讨论(0) 举报
我只想做你的唯一
5楼-- · 2019-01-04 23:54

Notice that this line:

lol = document.getElementById('lolz').value;

is before the actual <input> element on your markup:

<input type="text" name="enter" class="enter" value="" id="lolz"/>

Your code is parsed line by line, and the lol = ... line is evaluated before the browser knows about the existance of an input with id lolz. Thus, document.getElementById('lolz') will return null, and document.getElementById('lolz').value should cause an error.

Move that line inside the function, and it should work. This way, that line will only run when the function is called. And use var as others suggested, to avoid making it a global variable:

function kk(){
    var lol = document.getElementById('lolz').value;
    alert(lol);
}

You can also move the script to the end of the page. Moving all script blocks to the end of your HTML <body> is the standard practice today to avoid this kind of reference problem. It also tends to speed up page load, since scripts that take long to load and parse are processed after the HTML has been (mostly) displayed.

查看更多
0人赞 添加讨论(0) 举报
爷、活的狠高调
6楼-- · 2019-01-04 23:55

document.getElementById('id').value

查看更多
0人赞 添加讨论(0) 举报
够拽才男人
7楼-- · 2019-01-04 23:58 
<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>
查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)