В общем есть форма "Расписание".
И при нажатии на "Добавить" данные которые мы ввели внутри и выбирали сохраняются в массиве.
При нажатии на Показать Расписание , показываются данные которые мы ввели в одном блоке.
Вопрос:
Как сделать так чтобы данные выводились не в одном блоке, а по отдельности?
Ибо данные слипаются вместе и выглядит это очень не аккуратно.
Код:
<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>
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;
}