Add values in DIV

Question

Hello

I have 3 inputs, I would like when typing something in input 1, to insert the contents in a result called div, and when typing in input 2 be inserted in the result div and so on, without replacing the previous value in javascript.

Example:

Input 1 - Value: 10

Input 2 - Value: 5

Input 3 - Value: 12

Result in DIV: 10, 5, 12

Thank you

Answer 1

Footsteps:

• 1. Go through each input and add your value in a array, if it is not empty
• 2. Join each item of the array with one ", ";
• 3. Write the result in the div
• 4. Put everything in one function and run it with the keyup us inputs

var inputs = document.querySelectorAll('.concatenate');
var div = document.querySelector('div');

function fillDiv() { 
  var result = [];
  [].forEach.call(inputs, function(input, i) { // percorrendo inputs
    if (input.value != "") { // verificando se está vazio
      result.push(input.value); // adicionando ao input
    };
  });
  div.innerHTML = result.join(', ') // juntando com o ", " e escrevendo o resultado na div
};

[].forEach.call(inputs, function(input, i) { // adicionando a função ao evento key de cada input
  input.addEventListener('keyup', fillDiv);
});

<input type="text" class="concatenate">
<br>
<input type="text" class="concatenate">
<br>
<input type="text" class="concatenate">
<br>
<input type="text" class="concatenate">
<br>
<input type="text" class="concatenate">
<br>
<br>Resultado:

<div></div>