@almazkaRoxy

Как сделать функцию которая сохраняет информацию а затем выводит его на экран страницы?

В общем есть некая форма, где пользователь выбирает из тега 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
  • Вопрос задан
  • 53 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы