0

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

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

    <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>

1 ответ 1

0

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.