Обработка массива и создание формы ввода java script

Question

Нужно вывести список студентов, чтобы отметить их присутствие. Т.е. каждый студент должен быть в отдельном div, а напротив него - checkbox. Проблема в том, что не могу вывести студентов списком, каждого по отдельности. Они все в одном списке. В массиве - 2 группы студентов, которые выбираются в зависимости от выбора пользователя.

let btn = document.querySelector(".btn");
let allGroups = document.querySelector(".allgroups")
let allLessons = document.querySelector(".all_lessons")

let groups = [{
    group: 1,
    students: ["student1", "student2", "student3", ]
  },
  {
    group: 2,
    students: ["studentA", "studentB", "studentC", ]
  },
];


btn.addEventListener("click", function() {
  let out = document.querySelector(".out");
  let lessonName = document.createElement("div");
  lessonName.className = "lesson_name";
  lessonName.innerHTML = '<label for="topic">Topic</label><textarea type="text" id="topic"></textarea>';


  var studentsCheck;
  for (var item of groups) {
    if (item.group == allGroups.value) {
      for (let i = 0; i < item.students.length; i++) {
        studentsCheck = document.createElement("div");
        studentsCheck.innerHTML = '<label for="check">' + item.students + '</label><input type="checkbox" class="check">';
      };
    };
  };
  var saveButton = document.createElement("button");
  saveButton.innerHTML = "Save";
  saveButton.style.height = "30px";

  out.append(lessonName);
  out.append(studentsCheck);
  out.append(saveButton);

});

body {
  font-size: 20px;
  background-color: antiquewhite;
}

.main {
  display: flex;
  width: 50%;
  margin: 5% 5% 2%;
}

select,
label,
button {
  width: 30%;
  height: 20%;
  margin-right: 2%;
  padding-left: 1%;
  font-size: 20px;
}

label {
  margin-right: -10%;
}

buttom {
  height: 35%;
}

.lesson_name {
  margin: 20px;
  display: inline-flex;
  margin-right: 3%;
  padding-left: 1%;
}

#topic {
  margin-left: -50px;
  width: 900px;
}

input[type="checkbox"] {
  margin-left: 300px;
}

<div class="container">
  <div class="main">
    <label for="group">Group:</label>
    <select class="allgroups">
      <option value="1">Group 1</option>
      <option value="2">Group 2</option>
    </select>
    <label for="lesson">Lesson:</label>
    <select class="all_lessons">
      <option value="0">1</option>
      <option value="1">2</option>
      <option value="2">3</option>
      <option value="3">4</option>
    </select>
    <button type="button" class="btn">Select</button>
  </div>
  <hr>
  <div class="out"></div>
</div>

Answer 1

let btn = document.querySelector(".btn");
let allGroups = document.querySelector(".allgroups");
let allLessons = document.querySelector(".all_lessons");

let groups = [
  {
    group: 1,
    students: ["student1", "student2", "student3" ]
  },
  {
    group: 2,
    students: ["studentA", "studentB", "studentC" ]
  }
];

btn.addEventListener("click", function() {
  let out = document.querySelector(".out");
  out.innerHTML = "";

  let lessonName = document.createElement("div");
  lessonName.className = "lesson_name";
  lessonName.innerHTML = '<label for="topic">Topic</label><textarea type="text" id="topic"></textarea>';
  out.append(lessonName);

  for (var item of groups) {
    if (item.group == allGroups.value) {
      for (let i = 0; i < item.students.length; i++) {
        let studentsCheck = document.createElement("div");
        studentsCheck.innerHTML = '<label>' + item.students[i] + '<input type="checkbox" class="check"></label>';
        out.append(studentsCheck);
      }
    }
  }

  var saveButton = document.createElement("button");
  saveButton.innerHTML = "Save";
  saveButton.style.height = "30px";
  out.append(saveButton);
});

body {
  font-size: 20px;
  background-color: antiquewhite;
}

.main {
  display: flex;
  width: 50%;
  margin: 5% 5% 2%;
}

select,
label,
button {
  width: 30%;
  height: 20%;
  margin-right: 2%;
  padding-left: 1%;
  font-size: 20px;
}

label {
  margin-right: -10%;
}

buttom {
  height: 35%;
}

.lesson_name {
  margin: 20px;
  display: inline-flex;
  margin-right: 3%;
  padding-left: 1%;
}

#topic {
  margin-left: -50px;
  width: 900px;
}

input[type="checkbox"] {
  margin-left: 300px;
}

<div class="container">
  <div class="main">
    <label for="group">Group:</label>
    <select class="allgroups">
      <option value="1">Group 1</option>
      <option value="2">Group 2</option>
    </select>
    <label for="lesson">Lesson:</label>
    <select class="all_lessons">
      <option value="0">1</option>
      <option value="1">2</option>
      <option value="2">3</option>
      <option value="3">4</option>
    </select>
    <button type="button" class="btn">Select</button>
  </div>
  <hr>
  <div class="out"></div>
</div>

БЛОГ НА HUSL

Обработка массива и создание формы ввода java script

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