Как сделать чтобы каждый ввод имени добавлялся в массив и сохранялся, и в последствии по нажатию кнопки показывал весь список?

Question

Сделать скрипт который будет запрашивать количество студентов группе и запрашивать их имена и фамилии, записывая их в массив с объектами. После полного ввода будет выводить пронумерованный список группы.

Пытался сам сделать обычный массив, не смог додумать как именно сделать так чтобы каждый ввод имени добавлялся в массив и сохранялся, и в последствии по нажатию кнопки показывал весь список внесенных студентов

    <div id="forms">
        <input id="name" type="text" placeholder="Имя">
        <input id="surname" type="text" placeholder="Фамилия">
        <input id="age" type="text" placeholder="Возраст">
        <button type="button" name="button" id="button" value="submit" onclick="getArr()">Button</button>
      </div>

    
    <script>
    function getArr() {
  let inputAll = Array.from(document.querySelectorAll('#forms input'));
  let arr = [];
  let obj = {};

  let checkFieldsLength = inputAll.every((el) => el.value.length);

  if (checkFieldsLength) {
    for (const input of inputAll) {
      obj[input.id] = input.value;
    }
    arr.push(obj);
    return console.log(arr);
  }
  return alert('Не все поля заполнены');
}
    </script>

Answer 1

function makeElement(html) {
  let el = document.createElement('div');
  el.innerHTML = html.trim();
  return el.firstChild;
}

function makeForm(button) {
  let amount = button.previousElementSibling;
  let d = {
    "name": "Имя",
    "surname": "Фамилия",
    "age": "Возраст"
  };
  let form = makeElement('<div id="forms">');
  document.body.append(form);

  for (let i = 0; i < amount.value; i++) {
    Object.entries(d).forEach(([key, value]) => {
      form.appendChild(makeElement(`<input name="${key}" type="text" placeholder="${value}">`)); //value="${i + ' test'}"
    })
    form.appendChild(document.createElement('BR'));
  }
  form.appendChild(makeElement('<button type="button" value="submit" onclick="getArr(this)">Button</button>'));
  amount.disabled = true;
  button.style.visibility = "hidden";
}

function getArr(button) {
  let inputAll = forms.querySelectorAll('input');
  let zeros = [...inputAll].reduce((acc, cv) => acc + (cv.value.length ? 0 : 1), 0);
  if (zeros === 0) {
    let buf = "",
      masks = {
        'name': 'ФИО: # ',
        'surname': '#, ',
        'age': 'возраст # лет'
      };
    let list = makeElement('<ol id="list">');
    document.body.appendChild(list);
    for (const input of inputAll) {
      buf += masks[input.name].replace('#', input.value.trim());
      if (input.name === 'age') {
        list.appendChild(makeElement(`<li>${buf}</li>`));
        buf = "";
      }
    }
    button.style.visibility = "hidden";
  } else alert('Не все поля заполнены');
}

<div id="amount">
  <input type="text" value="2" placeholder="Кол-во студентов в группе">
  <button type="button" name="button" id="button0" value="submit" onclick="makeForm(this)">Button</button>
</div>

БЛОГ НА HUSL

Как сделать чтобы каждый ввод имени добавлялся в массив и сохранялся, и в последствии по нажатию кнопки показывал весь список?

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