Как получить доступ к значению события jquery вне метода? - PullRequest
0 голосов
/ 11 февраля 2020

У меня есть поле ввода текста:

<input type="text" id="from_input" class="form-control" placeholder="FROM">

Я хочу получить значение текста при его изменении. Вот мой jquery код:

<script>
  var fromValue;
  $(document).ready(function(){
    $("#from_input").change(function() {
      fromValue = $(this).val();
    });
    console.log(fromValue);
  });
</script>

Я получаю переменную fromValue как неопределенную. Мне нужно получить значение текстового поля для дальнейшего расчета во всем сценарии. Как мне этого добиться?

Ответы [ 3 ]

0 голосов
/ 11 февраля 2020

Пример:

$(function() {
  $('#itext').keyup(function() {
    var text = $(this).val();
    $('#result').text('Your text: ' + text);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="itext">
<br><label id="result">Your text: </label>
0 голосов
/ 11 февраля 2020

Вы регистрируете переменную fromValue до того, как сработало событие изменения.

Ваш код должен быть обновлен для регистрации переменной внутри замыкания:

<script>
  var fromValue;
  $(document).ready(function(){
    $("#from_input").change(function() {
      fromValue = $(this).val();
      console.log(fromValue);
    });
  });
</script>

Если вы попытаетесь получить доступ к fromValue вне этой внутренней функции, он будет неопределенным. Только во внутренней функции (точнее, после вызова внутренней функции) она будет иметь значение.

Если вы хотите использовать значение, вам нужно будет передать его изнутри функции, например

$("#from_input").change(function() {
  do_something($(this).val());
});

где do_something определяется в другом месте кода и выполняет дальнейшие вычисления, которые вы пытаетесь сделать.

Вы должны прочитать о замыканиях , так как это с чем вы здесь имеете дело.

0 голосов
/ 11 февраля 2020

Вы можете использовать аргумент события. Событие содержит целевой элемент. И я заметил, что вы console.log вне функции обратного вызова. Ваш код, вероятно, уже работает, но вы просто не видите его.

<script>
  var fromValue;
  $(document).ready(function(){
    $("#from_input").change(function(event) {
      fromValue = event.target.value;
      console.log(fromValue);
    });
  });
</script>
...