В общем есть некая форма, где пользователь выбирает из тега Select[option], некие данные,
Затем дальше в ''TextArea'' он пишет любую информацию.
И нажимает на кнопку Button, которая выводит информацию которую ввел и выбрал пользователь на Новый Блок на сайте экрана
Вопрос:
ВКРАТЦЕ - (Надо сделать так чтобы при нажатии на кнопку "Добавить",
данные которые ввел пользователь сохранились,
после чего форма обновилась бы и пользователь смог снова ввести форму но уже другую.
После когда пользователь уже нажимал на "Показать расписание", должны вывестись те данные(формы) которые пользователь ввел до этого. Уже в нескольких контейнерах на сайте)
Код:
<div class="container custom__container__header">
<div class="row justify-content-center">
<form>
<div class="col-4">
<h1 class="white_h1">Расписание</h1>
<span class="white_span">День недели: </span><select name="" id="day">
<option>Понедельник</option>
<option>Вторник</option>
<option>Среда</option>
<option>Четверг</option>
<option>Пятница</option>
</select>
</div>
<div class="col-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">
<span class="white_span">Приоритет</span><select name="" id="priory">
<option>не важный</option>
<option>важный</option>
<option>очень важный</option>
</select>
</div>
<div class="col-4">
<textarea placeholder="Напишите название урока....." cols="42" rows="6" id="textArea"></textarea>
</div>
</form>
<div class="col">
<button class="blue__btn" id="addInfo">Добавить</button>
<button class="green__btn" id="getInfo">Показать расписание</button>
</div>
</div>
</div>
.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;
}
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');
document.getElementById('response').textContent = ("Расписание на: " + day.value + ' Время: ' +time.value+ ' Приоритет: ' +priory.value + ' Предмет: ' + textArea.value)
});
</cod
Простой
