Javascript 多输入值输出

Question

Hi I want to create a stamp script and I want the user to enter his name and address in three fields, then he should see the fields later in the stamp edition? I have 3 input fields where the user can give in his data, now i will give this data in a new class. This is what i have:

 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

As you have not made it very clear what you are trying to accomplish, I am providing a simple example that might send you down the right path.

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

Since you already seem to understand .html() and . text() , we can look at the Selector. The one used will select all elements with an ID Attribute of Text in the beginning of the string. See More: https://api.jquery.com/category/selectors/attribute-selectors/

Answer 2

It looks like you want to mimic what the user is typing in the text inputs and show it in ausgabe . If that's what you want, then you can tie the keyUp event to each of the inputs.

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

But this will overwrite .ausgabe every time text is entered into a different input.

You could get the value of .ausgabe every time keyUp fires and pre-pend that value:

So you may want to have a button that renders each input's value into .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
   })
})