Add values in DIV

Question

Add values in DIV

Navigation

#1 by (1 votes)

1

Hello

I have 3 inputs, I would like that when typing something in input 1, insert the content into a div called result, and typing in input 2 is inserted into 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

IVD score: 10, 5, 12

Thank you

javascript

asked by anonymous 26.10.2016 / 20:50

1 answer

Error creating table with flyway using maven JavaScript src link

score 1 · Accepted Answer

Steps:

Scroll through each input and add your value to an array , if it is not empty
Put each item in the array with a ",";
Write the result in the div
Put everything in a function and execute it with the keyup event in 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>