Как взять несколько строк из входных данных и поместить их в один массив?

Question

Как мне взять строку из каждого поля ввода и поместить ее в один и тот же массив?

Код, который у меня есть на данный момент, такой:

var input1 = document.querySelector('.form');
var btn = document.getElementById('btn');
var array = [];

btn.addEventListener('click', function(){

  array.push(input.value);
  
  console.log(array);


});
  

<div class="container mt-5">
  <div class="row">
    <div class="col-lg-12 text-center">
      <input type="text" class="form">
    </div>
  </div>
</div>


<div class="container mt-5">
  <div class="row">
    <div class="col-lg-12 text-center">
      <input type="text" class="form">
    </div>
  </div>
</div>

<button class="btn btn-primary text-center" id="btn">SUBMIT</button>

Заранее спасибо.

Answer 1

Используйте Array.from, чтобы выбрать все .form s с помощью querySelectorAll, и передайте функцию отображения, которая извлекает .value из каждого:

const inputs = document.querySelectorAll('.form');
var btn = document.getElementById('btn');

btn.addEventListener('click', function(){
  const arr = Array.from(inputs, elm => elm.value);
  console.log(arr);
});

<div class="container mt-5">
  <div class="row">
    <div class="col-lg-12 text-center">
      <input type="text" class="form">
    </div>
  </div>
</div>


<div class="container mt-5">
  <div class="row">
    <div class="col-lg-12 text-center">
      <input type="text" class="form">
    </div>
  </div>
</div>

<button class="btn btn-primary text-center" id="btn">SUBMIT</button>