Как вывести данные в отдельных блоках?

Question

В общем есть форма "Расписание". И при нажатии на "Добавить" данные которые мы ввели внутри и выбирали сохраняются в массиве. При нажатии на Показать Расписание , показываются данные которые мы ввели в одном блоке.

Вопрос:

Как сделать так чтобы данные выводились не в одном блоке, а по отдельности? Ибо данные слипаются вместе и выглядит это очень не аккуратно. (Без всяких Jquery и прочего)

Код:

   const getInfo = document.getElementById('getInfo');

getInfo.addEventListener('click', function() {
  const day = document.getElementById('day');
  const time = document.getElementById('time');
  const priory = document.getElementById('priory')
  const textArea = document.getElementById('textArea');
});
//данные getElementById(...).



const addInfo = [];





function myFunction() {
  console.log(addInfo);
  addInfo.push(day.value);
  addInfo.push(time.value);
  addInfo.push(priory.value);
  addInfo.push(textArea.value);
  document.getElementById("myForm").reset();
}
//функция push().


function myFunctional() {
  document.getElementById('response').innerHTML = (addInfo);
    addInfo.forEach(function(item, index, arr) {
    console.log(item);
  })
  response.style.backgroundColor = "yellow";
  response.style.borderRadius = "5px";
}

#body_container {
  background: #241571;
  background-size: cover;
  height: auto;
}



.custom__container__header {
  padding-top: 100px;
}

.blue__btn { 
  width: 100px;
  height: 45px;
  background: #157dec;
  color: #fff;
  border: none;
  cursor: pointer;
}


.green__btn {
  width: 200px;
  height: 45px;
  background: #03ac13;
  color: #fff;
  border: none;
  cursor: pointer;
}

.white_h1 {
  color: #fff;
}

.white_span {
  color: #fff;
}



#response { 
  color: #000;
  width: 600px;
  height: 70px;
}

<div class="container custom__container__header">
                    <div class="row justify-content-center">
                        <form id="myForm">
                         <div class="col-4">
                            <h1 class="white_h1">Расписание</h1>
                          <span class="white_span">День недели: </span><select name="select"  id="day">
                            <option>Понедельник</option>
                            <option>Вторник</option>
                            <option>Среда</option>
                            <option>Четверг</option>
                            <option>Пятница</option>
                        </select>
                         </div>
                         <div class="col-4 pt-4">
                             <span class="white_span">Время: </span><select name="select" id="time">
                            <option>09:00</option>
                            <option>10:00</option>
                            <option>11:00</option>
                            <option>12:00</option>
                            <option>13:00</option>
                            <option>14:00</option>
                            <option>15:00</option>
                            <option>16:00</option>
                        </select>
                         </div>
                        <div class="col-4 pt-4">
                         <span class="white_span">Приоритет</span><select name="" id="priory">
                            <option>не важный</option>
                            <option>важный</option>
                            <option>очень важный</option>
                        </select>
                         </div>
                         <div class="col-4 pt-4">
                            <textarea placeholder="Напишите название урока....."  cols="42" rows="6" id="textArea"></textarea> 
                         </div>
                        </form>
                        <div class="col">
                         <button class="blue__btn" id="addInfo" onclick="myFunction()">Добавить</button>
                         <button class="green__btn" id="getInfo" onclick="myFunctional()">Показать расписание</button>
                        </div>
                    </div>
                    <div class="col pt-4">
                        <div id="response"></div>
                    </div>
                </div>

Answer 1

const getInfo = document.getElementById('getInfo');

getInfo.addEventListener('click', function () {
  const day = document.getElementById('day');
  const time = document.getElementById('time');
  const priory = document.getElementById('priory')
  const textArea = document.getElementById('textArea');
});


const addInfo = [];

function myFunction() {
  addInfo.push([day.value, ` ${time.value}`, ` ${priory.value
    }`, ` ${textArea.value}`])
  document.getElementById("myForm").reset();
}


function myFunctional() {
  const response = document.getElementById('response');
  for (let i = 0; i < addInfo.length; i++) {
    const div = document.createElement("div");
    div.innerHTML = addInfo[i];
    response.append(div);
  }

  response.style.backgroundColor = "yellow";
  response.style.borderRadius = "5px";
}

#body_container {
  background: #241571;
  background-size: cover;
  height: auto;
}



.custom__container__header {
  padding-top: 100px;
}

.blue__btn {
  width: 100px;
  height: 45px;
  background: #157dec;
  color: #fff;
  border: none;
  cursor: pointer;
}


.green__btn {
  width: 200px;
  height: 45px;
  background: #03ac13;
  color: #fff;
  border: none;
  cursor: pointer;
}

.white_h1 {
  color: #fff;
}

.white_span {
  color: #fff;
}



#response {
  color: #000;
  width: 600px;
  height: 70px;
}

 <div class="container custom__container__header">
    <div class="row justify-content-center">
      <form id="myForm">
        <div class="col-4">
          <h1 class="white_h1">Расписание</h1>
          <span class="white_span">День недели: </span><select name="select" id="day">
            <option>Понедельник</option>
            <option>Вторник</option>
            <option>Среда</option>
            <option>Четверг</option>
            <option>Пятница</option>
          </select>
        </div>
        <div class="col-4 pt-4">
          <span class="white_span">Время: </span><select name="select" id="time">
            <option>09:00</option>
            <option>10:00</option>
            <option>11:00</option>
            <option>12:00</option>
            <option>13:00</option>
            <option>14:00</option>
            <option>15:00</option>
            <option>16:00</option>
          </select>
        </div>
        <div class="col-4 pt-4">
          <span class="white_span">Приоритет</span><select name="" id="priory">
            <option>не важный</option>
            <option>важный</option>
            <option>очень важный</option>
          </select>
        </div>
        <div class="col-4 pt-4">
          <textarea placeholder="Напишите название урока....." cols="42" rows="6" id="textArea"></textarea>
        </div>
      </form>
      <div class="col">
        <button class="blue__btn" id="addInfo" onclick="myFunction()">Добавить</button>
        <button class="green__btn" id="getInfo" onclick="myFunctional()">Показать расписание</button>
      </div>
    </div>
    <div class="col pt-4">
      <div id="response"></div>
    </div>
  </div>

БЛОГ НА HUSL

Как вывести данные в отдельных блоках?

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