Как вывести данные из консоли в желтый(любой цвет) блок на экран сайта?

Question

[himonga]

В общем есть некая форма, где пользователь выбирает из тега 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');
  console.log(day.value);
  console.log(time.value);
  console.log(priory.value);
  console.log(textArea.value);
});

Answer 1

[Nevea]

как вариант:
HTML

<div id="response">
</div>

JS

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 )
});

CSS

#response { 
  color: #ffff00;
}

Answer 2

[Евгений]

Переопредели примерно так:

console.log = function(message) {
    alert(message); // или любое другое действие
};

Но такие события не стоит перехватывать. Если есть возможность, допиши свою логику в функцию, которую привязываешь к событию.