Вывести информацию из массива инпутов на экран в js

Question

есть такой код, он считывает какое количество input должно быть на экране, создаёт массив из input и при нажатии на кнопку (#random) выводит нужное количество input на экран. Подскажите пожалуйста, как сделать так, чтобы при нажатии на кнопку (#b-1) всё, что введено в каждый из выведенных input вывелось на экран в элементе (#out). И возможно есть какие-то замечания на счёт кода, потому что пока не до конца понимаю как грамотно всё совместить.

<div>
    Length a: <input type="text" id="length" value="2"> 
    <div>
        <button id="random">Push</button>
    </div>
    <button id="b-1">cout</button>
    <div id="out"></div>
</div>

document.querySelector('#random').onclick = function () {
    let l = document.querySelector('#length').value;

// функция генерации инпута
    const makeInput = () => {
        const el = document.createElement('input');
        el.type = 'text';
        el.className = 'input';
        return el;
    };

    // функция генерации массива элементов из необходимого количества
    const generateElementsList = (count, constructor) => {
        return Array(count).fill().map(constructor);
    };

    function save() {
        for (var i = 0; i < l; i++) {
            // создаем элементы
            const inputs = generateElementsList(1, makeInput);  
            // добавляем на страницу
            document.body.append(...inputs);    
        }   
            var br = document.createElement('br');
            br.innerHTML = "<br>";
            document.body.appendChild(br);
    };
     save();
        
}

Answer 1

const $random = document.querySelector('#random');
const $inputsContainer = document.querySelector('.inputs-container');
const $inputsCount = document.querySelector('#inputs-count');
const $out = document.querySelector('#out');
const $showValues = document.querySelector('#show-values');

const makeElement = (tag, className, childrens = []) => {
  const el = document.createElement(tag);
  el.className = className;
  el.append(...childrens);
  return el;
};

const makeInput = () => {
  const el = makeElement('input', 'input');
  el.type = 'text';
  return el;
};

const createElements = (count, constructor) => {
  return Array(count).fill().map(constructor);
};

const showInputsText = () => {
  const inputs = $inputsContainer.querySelectorAll('input');
  const values = [...inputs].reduce((acc, element) => {
    return `${acc} ${element.value}`;
  }, '');
  $out.textContent = values;
};

$showValues.addEventListener('click', showInputsText);

$random.addEventListener('click', () => {
  const count = parseInt($inputsCount.value);

  const inputs = createElements(count, makeInput);
  const $row = makeElement('div', 'mb-1', inputs);
  $inputsContainer.append($row);
});

.mb-1 {
  margin-bottom: 1rem;
}

<div class="mb-1">
  Inputs count: <input type="text" id="inputs-count" value="2" />
  <button id="random">Push</button>
  <button id="show-values">cout</button>
</div>

<div class="mb-1" id="out"></div>

<div class="inputs-container"></div>

БЛОГ НА HUSL

Вывести информацию из массива инпутов на экран в js

Ответы (1 шт):