Как вводить информацию в полях и чтобы она отображалась в необходимом месте?

Question

[Константин Баскаков]

Здравствуйте, Уважаемые знатоки!

Как сделать так, чтобы например вводишь в 3 разных полях информацию обычную текстовую, а она где надо показывалась-бы на сайте сразу онлайн?

Вариант № 1

<input type="text" name="text-1">
<input type="text" name="text-2">
<input type="text" name="text-3">
<hr>
<p>Вот тут будет вывод text-1</p>
<p>Вот тут будет вывод text-2</p>
<p>Вот тут будет вывод text-3</p>

И если можно, то еще аналогично и с добавлением графики - Вариант № 2

<input type="file" name="photo">
<input type="text" name="text-1">
<input type="text" name="text-2">
<input type="text" name="text-3">
<hr>
<img src="photo">
<p>Вот тут будет вывод text-1</p>
<p>Вот тут будет вывод text-2</p>
<p>Вот тут будет вывод text-3</p>

Заранее, Благодарю за ответы!

Comments

[Илья]

Почитайте про Vue, React или Angular

Answer 1

[historydev]

Всё просто example, вешаете eventListener:

<input type="text" id='text'>
<p id='showText'></p>

function show_input_info(input, el) {
	document.querySelector(input).addEventListener('input', e => {
  	document.querySelector(el).innerText = e.target.value;
  });
}

show_input_info('#text', '#showText');

Comments

[Константин Баскаков]

А с картиной (Вариант №2) не прокатит так, да?

[historydev]

Константин Баскаков, Прокатит. Учись юзать гугл. example

[Константин Баскаков]

Владимир, попрошу еще тебя об одном, я просто в JS не силен вовсе, и если не сложно, подскажи пожалуйста, как еще в случае с полем select такое сделать?

Допустим есть такое поле

<select name="text-5">
	<option value="0">Выбор №1</option>
	<option value="1">Выбор №2</option>
	<option value="2">Выбор №3</option>
</select>

Но вся проблема в том, что у него значения value в опциях переименовывать нельзя, т.к. эти значения пойдут в БД и будут движком обрабатываться в последствии, а мне надо выводить не 0, 1 или 2 на фронте сайта, а Выбор №1, Выбор №2 или Выбор №3 сюда - > <p id="showText-5"></p>

[historydev]

Константин Баскаков, ответом отметь и новый вопрос задай.