jQuery для L oop Возвращает неопределенное значение, кроме первого символа

Question

Я пытаюсь выяснить, почему my for l oop возвращается как «неопределенное», за исключением первого символа. Я пробовал много разных вещей, включая методы .each () и $ .each () jQuery с одинаковым результатом. Я ценю любую помощь заранее.

$(".two-factor-input:last-child").on("keyup", function(){
  if ($(this).val() !== ""){
    var input = $(".two-factor-input");
    var output = "";
    for (var i = 0; i < input.length; i++){
      output += input.val()[i];
    }
    $(".modal-message").val(output);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="1" placeholder="·" autocomplete="off">
      <input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="2" placeholder="·" autocomplete="off">
      <input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="3" placeholder="·" autocomplete="off">
      <input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="4" placeholder="·" autocomplete="off">
      <input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="5" placeholder="·" autocomplete="off">
      <input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="6" placeholder="·" autocomplete="off">
      <input class="modal-message">

Вход 321321

Токовый выход 3undefinedundefinedundefinedundefinedundefined

Требуемый выход * 321321

Answer 1

Вы должны l oop это по-другому, но если вы хотите l oop, то просто используйте eq (). Кроме того, было бы лучше назвать имя -> $ input

output += input.eq(i).val();  

Answer 2

Эта версия логики c отображает все значения входов и затем объединяет их в одну строку. Если длина строки соответствует количеству входных данных, она устанавливает значение. В противном случае значение не отображается.

var $inputs = $(".two-factor-input");

$inputs.last().on("keyup", function(){
  var newValue = $inputs.get().map(it => it.value.trim()).join('');
  
  $('.modal-message').val(
    (newValue.length === $inputs.length) ? newValue : ''
  );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="1" placeholder="·" autocomplete="off">
      <input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="2" placeholder="·" autocomplete="off">
      <input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="3" placeholder="·" autocomplete="off">
      <input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="4" placeholder="·" autocomplete="off">
      <input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="5" placeholder="·" autocomplete="off">
      <input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="6" placeholder="·" autocomplete="off">
      <input class="modal-message">

Ваша первоначальная проблема заключается в том, что вы выполняли [i] с результатом val(), а не с input, который является объектом jQuery со стеком результатов.