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

Question

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

Рейтинг: 0Ответов: 4Опубликовано: 10.05.2023

У меня есть тег input type=text, куда пользователь вводит любой текст. При нажатии на кнопку, этот текст должен появится в ранее поставленном 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>

javascript html

Источник: Stack Overflow на русском

Answer 1

▲ 0

Вроде так.

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

▲ 0

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

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

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

▲ 0

<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

▲ -1

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

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

<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>

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

Ответы