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

Ответы

Ответ 1

Причина, по которой вы работаете, не работает, когда 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>

Обратите внимание на атрибут onload тега <body>. (С другой стороны: атрибут language тега <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 будет готов. Этот второй пример также использует . Click() для привязки kk onclick обработчика вместо того, чтобы делать это inline в HTML.

Ответ 2

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

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

Изменить. Я удалил атрибут language="javascript", потому что он устарел. См. Спецификация W3 HTML4, элемент SCRIPT:

language= cdata [ДИ]

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

и

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

Ответ 3

Изменить:

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

Ответ 4

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

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);
}

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

Ответ 5

<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

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

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

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

Ответ 7

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

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

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

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

Ответ 8

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

Ответ 9

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

Ответ 10

document.getElementById( 'ID'). Значение

Ответ 11

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

Ответ 12

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