Как получить входное текстовое значение в 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>


когда я ставлю lol = document.getElementById('lolz').value; вне функции kk(), как показано выше, это не работает, но когда я положил его внутрь, он работает. Может кто-нибудь сказать мне, почему?

659   12  

12 ответов:

причина, по которой вы не работаете, когда lol определен вне его, потому что DOM еще не загружен при первом запуске JavaScript. Из-за этого, getElementById вернутся null ( см. MDN).

вы уже нашли самое очевидное решение: по телефону getElementById внутри функции DOM будет загружен и готов к моменту вызова функции, и элемент будет найден, как вы ожидаете к.

есть несколько других решений. Один из них должен ждать, пока весь документ не будет загружен, например:

<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> тег. (на стороне Примечание: на <script> тег является устаревшим. Не используй его.)

есть, однако, проблема с onload: он ждет, пока все (включая изображения и т. д.) загруженный.

другой вариант-подождать пока DOM не будет готов (что обычно намного раньше, чем onload). Это можно сделать с помощью" простого " JavaScript, но гораздо проще использовать библиотеку DOM, такую как jQuery.

например:

<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 .готов() принимает функцию в качестве аргумента. Функция будет запущена, как только DOM будет готов. Второй пример также использует .нажмите () привязать КК onclick обработчик, вместо того, чтобы делать то, что внутри ФОРМАТ HTML.

63  
2016-02-09 12:32:34

Не используйте глобальные переменные таким образом. Даже если это может сработать, это плохой стиль программирования. Таким образом можно непреднамеренно перезаписать важные данные. Сделайте это вместо:

<script type="text/javascript">
   function kk(){
       var lol = document.getElementById('lolz').value;
       alert(lol);
   }
</script>

если вы настаиваете var lol для установки вне функции kk, то я предлагаю это решение:

<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 элемент, на который он ссылается, потому что элементы могут быть запрошены только с помощью getElementById если они уже были разобраны и создан.

оба примера работают, протестированы в jsfiddler.

Edit: я убрал , потому что он устарел. Смотрите спецификация W3 HTML4, элемент скрипта:

язык= cdata [CI]

устаревший. Этот атрибут определяет язык сценариев содержимого этого элемента. Его значение идентификатор языке, но, поскольку эти идентификаторы не являются стандартными, этот атрибут устаревший в пользу типа.

и

устаревший элемент или атрибут-это устаревшие на более новые конструкции. [ ... ] Устаревшие элементы могут устареть в будущих версиях HTML. [ ... ] Эта спецификация включает примеры, иллюстрирующие, как избежать использования устаревших элементов. [...]

13  
2014-02-15 20:50:24

обратите внимание, что эта строка:

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

перед фактическим <input> элемент на разметку:

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

ваш код анализируется строка за строкой, и lol = ... строка вычисляется до того, как браузер узнает о существовании ввода с идентификатором lolz. Таким образом,document.getElementById('lolz') вернутся null и document.getElementById('lolz').value должно вызвать ошибку.

переместите эту строку внутри функции, и она должна работать. Таким образом, эта линия будет работать только тогда, когда вызывается функция. И использовать var как предлагали другие, чтобы избежать превращения его в глобальную переменную:

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

вы также можете переместить скрипт в конце страницы. Перемещение всех блоков скрипта в конец вашего HTML <body> сегодня стандартная практика, чтобы избежать такого рода ошибок. Он также имеет тенденцию ускорять загрузку страницы, поскольку сценарии, которые занимают много времени для загрузки и анализа, обрабатываются после отображения HTML (в основном).

6  
2012-08-04 21:24:35

Edit:

  1. переместите javascript в конец страницы, чтобы убедиться, что DOM (html-элементы) загружен перед доступом к ним (javascript для завершения быстрой загрузки).
  2. объявляйте свои переменные всегда, как в примере, используя var textInputVal = документ.getElementById ('textInputId').значение;
  3. используйте описательные имена для входов и элементов (облегчает понимание вашего собственного кода и когда кто-то другой ищет он.)
  4. чтобы узнать больше о getElementById, см.:http://www.tizag.com/javascriptT/javascript-getelementbyid.php
  5. использование библиотеки, такой как jQuery делает использование javascript в сто раз проще, чтобы узнать больше:http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
6  
2012-08-04 21:48:56 
<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>

использовать

6  
2016-05-02 03:16:11

поскольку ваш lol теперь является локальной переменной, рекомендуется использовать ключевое слово var для объявления любых переменных.

это может работать для вас :

function kk(){
  var lol = document.getElementById('lolz').value;
  alert(lol);
}
2  
2012-08-04 21:23:21

все вышеперечисленные решения полезны. И они использовали линию lol = document.getElementById('lolz').value; внутри функции function kk().

Я предлагаю, вы можете вызвать эту переменную из другой функции fun_inside()

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

это может быть полезно при построении сложных проектов.

2  
2014-06-05 09:51:30 
<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>
2  
2014-09-10 12:55:48 
<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>
2  
2016-12-18 17:34:54

документ.getElementById ('id').значение

1  
2016-05-01 10:14:39

как получить входное текстовое значение в JavaScript

    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´s a wonderful day!" id="textbox"/>
<input type="button" value="Show this message!" onClick="showMessage()" />
</div>
1  
2017-04-10 07:07:59

причина, по которой это не работает, заключается в том, что переменная не изменяется с текстовым полем. Когда он изначально запускает код, он получает значение текстового поля, но впоследствии он никогда не вызывается снова. Однако, когда вы определяете переменную в функции, каждый раз, когда вы вызываете функцию, переменная обновляется. Затем он предупреждает переменную, которая теперь равна входу текстового поля.

0  
2016-09-05 20:56:53

Comments

    Ничего не найдено.
Click here to cancel reply.