Javascript Выход с несколькими входами

Question

Привет, я хочу создать скрипт штампа и хочу, чтобы пользователь ввел свое имя и адрес в три поля, затем он должен увидеть поля позже в выпуске штампа? У меня есть 3 поля ввода, где пользователь может указать свои данные, теперь я передам эти данные в новом классе. Вот что у меня есть:

window.onload = function() {
$( "#Text1" )
  .keyup(function() {
    var value = $( this ).val();
    $( ".ausgabe" ).text( value );
  })
  .keyup();
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Text1">
<input type="text" id="Text2">
<input type="text" id="Text3">
<div class="ausgabe"></div>

Answer 1

Похоже, вы хотите имитировать c того, что пользователь печатает в текстовых вводах, и отображать его в ausgabe. Если это то, что вы хотите, то вы можете ie событие keyUp для каждого из входов.

$(input [type='text']).keyUp(function() {
   var value = $(this).val();
   $('.ausgabe').text(value);
}

Но это будет перезаписывать .ausgabe каждый раз, когда текст вводится в другой ввод.

Вы можете получить значение .ausgabe каждый раз, когда keyUp запускает и предварительно ожидать это значение:

Так что вы можете захотеть иметь кнопку, которая отображает значение каждого входа в .ausgabe:

<button>.click(function() {
   $(input[type="text"]).each(function() {
      var boxText = $(this).val(); //text box value
      var aus = $('.ausgabe').text(); //ausgabe value
      $('.ausgabe').text(boxText + ' ' + aus); //combine the current text box value with ausgabe
   })
})

Answer 2

Поскольку вы не очень ясно дали понять, что пытаетесь выполнить sh, я привожу простой пример, который может направить вас по правильному пути.

$(function() {
  function updateDiv(source, target) {
    var newVal = "";
    source.each(function() {
      newVal += "<span class='text " + $(this).attr('id').replace("Text", "item-") + "'>" + $(this).val() + "</span> ";
    });
    target.html(newVal);
  }

  $("[id^='Text']").keyup(function(e) {
    updateDiv($("input[id^='Text']"), $(".ausgabe"));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Text1">
<input type="text" id="Text2">
<input type="text" id="Text3">
<div class="ausgabe"></div>

Поскольку вы уже, кажется, понимаете .html() и. text(), мы можем посмотреть на селектор. Один из них выберет все элементы с атрибутом ID Text в начале строки. Смотрите больше: https://api.jquery.com/category/selectors/attribute-selectors/