Как сделать чтобы при нажатии кнопки появлялся введённый пользователем текст

Question

У меня есть тег input type=text, куда пользователь вводит любой текст, и при нажатии input=button с OnClick этот текст должен появится в ранее поставленном font. Как это максимально кратко реализовать через скрипт?

<form>
<input type=text> // куда вводить текст 
<input type=button OnClick="ClickFunction1()" value=Отправить> //кнопка для отправки текста
</form>
<font id=font1></font> // место где должен появится текст
<script>
function ClickFunction1() {
getElementById("font1"). innerHTML = ""; //и после = по сути нужно указать путь/имя/айди(?) до input=text
</script>

Answer 1

Вроде так.

let btn = document.querySelector('input[type="button"]');
btn.addEventListener("click", function() {
  let inputValue = document.querySelector('input[type="text"]').value;
  let font = document.getElementById("font1");
  font.innerHTML = inputValue;
});

<form>
<input type=text>
<input type=button value=Отправить>
</form>
<div id=font1></div>

Answer 2

Как это максимально кратко реализовать через скрипт?

Пробую максимально кратко...

const a = document.querySelectorAll('input')
a[1].addEventListener('click', _ => {
  font1.textContent = a[0].value
})

<form>
  <input type=text /> 
  <input type=button value=Отправить />
</form>
<font id=font1></font>

Answer 3

<form>
  <input id="text-input" type=text>
  <button id="button" >Отправить</button>
</form>
<p id=font1></p>
<script>
    const input = document.getElementById('text-input')
    const button = document.getElementById('button')
    const text = getElementById("font1")

    button.addEventListener('click', () => {
      text.textContent = input.value
    })
</script>

Answer 4

Ваш скрипт требует небольшой доработки.

Вот рабочий пример:

<form>
  <input type="text" id="inputText" placeholder="Введите текст"> <!-- Поле ввода текста -->
  <input type="button" onclick="ClickFunction1()" value="Отправить"> <!-- Кнопка -->
</form>
<font id="font1"></font> <!-- Место для отображения текста -->
<script>
  function ClickFunction1() {
    // Получаем введённый текст из input
    const userInput = document.getElementById("inputText").value;
    // Устанавливаем текст в font
    document.getElementById("font1").innerHTML = userInput;
  }
</script>

Объяснение:

У поля ввода input type="text" добавлен id="inputText", чтобы обратиться к нему через JavaScript.
У элемента font уже есть id="font1", он используется для установки текста.
В функции ClickFunction1:

document.getElementById("inputText").value получает текст, введённый пользователем.
document.getElementById("font1").innerHTML = userInput; вставляет этот текст в font

Теперь при вводе текста в поле и нажатии кнопки он появится в элементе <font>

БЛОГ НА HUSL

Как сделать чтобы при нажатии кнопки появлялся введённый пользователем текст

Ответы (4 шт):