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

Question

Как получить входное текстовое значение в 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(), как показано выше, он не работает, но когда я помещаю его внутрь, он работает. Кто-нибудь может сказать мне, почему?

56

get input javascript text

автор: bfavaretto

12 ответов

автор: PPvG · Accepted Answer · 2016-02-09 10:32:34

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

автор: nalply · Accepted Answer · 2014-02-15 18:50:24

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

<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.

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

язык = разделы CDATA [CI]

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

и

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

автор: bfavaretto · Accepted Answer · 2012-08-04 18:24:35

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

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

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

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

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

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

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

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

автор: Mauno Vähä · Accepted Answer · 2012-08-04 18:48:56

изменить:

переместите javascript в конец страницы, чтобы убедиться, что DOM (html-элементы) загружен перед доступом к ним (javascript для завершения быстрой загрузки).
объявите свои переменные всегда, как в примере, используя var textInputVal = документ.getElementById ('textInputId').значение;
используйте описательные имена для входных данных и элементов (облегчает понимание вашего собственного кода и когда кто-то другой ищет он.)
чтобы узнать больше о getElementById, см.:http://www.tizag.com/javascriptT/javascript-getelementbyid.php
использование библиотеки, такой как jQuery, упрощает использование javascript в сто раз, чтобы узнать больше:http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

автор: DOCTYPE HTML · Accepted Answer · 2016-05-02 00:16:11

<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>

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

автор: Shreedhar · Accepted Answer · 2012-08-04 18:23:21

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

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

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

автор: htoniv · Accepted Answer · 2014-06-05 06:51:30

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

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

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

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

автор: Scott · Accepted Answer · 2014-09-10 09:55:48

<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>

автор: harsh mangalam · Accepted Answer · 2016-12-18 15:34:54

<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>

автор: Selva Raj · Accepted Answer · 2016-05-01 07:14:39

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

1

автор: Selva Raj

автор: Jorgesys · Accepted Answer · 2017-04-10 04:07:59

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

автор: user6797340 · Accepted Answer · 2016-09-05 17:56:53

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