Как отобразить введенный текст в текстовом поле? - PullRequest
Новая
       11

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

0 голосов
/ 22 декабря 2019

Я хотел бы ввести текст в поле ввода и отобразить его в текстовом поле.

Я думаю, что это легко. Мне нужен один Ввод для ввода текста, кнопка и текстовое поле для отображения моего текста. Но мой код не работает.

Это мой код: 

<!DOCTYPE html>
<link rel="stylesheet" href="style.css">

<script type="text/javascript">
function ausgabe(){
  var text=document.getElementById("text");
  var Wiedergabe=document.getElementById("Wiedergabe");
  var Text=text.value;
  Wiedergabe.value=Text
}

</script>
<div class="Webview">

  <div class="message_container" id="myForm" ></div>

  <form class="send_container">
    <input type="text">
    <button type="submit"
    value="Nachricht absenden"
    onclick="ausgabe">

  </form>



</div>


@charset "UTF-8";

.Webview{
  height: 400px;
  width: 300px;
}

.message_container{
  height: 80%;
  width: 100%;
  border:5px solid green;
}

.send_container{
  height: 20;
  width: 100%;
}

.send_container input{
  width: 70%;
  height:20%
  border:2px solid #1CE615;
}

.send_container button{
  width: 30%;
  height:20%;
}

Ответы [ 2 ]

1 голос
/ 22 декабря 2019

Я думаю, что вы каким-то образом ошиблись в отношении идентификатора и именования, вы пытаетесь получить доступ к элементам с неправильными именами - решение может быть следующим: 

  <input id="textField" type="text">
  <p>
     <input type="button" id="theButton" value="click me!" 
         onclick="document.getElementById('div').innerHTML = 
         document.getElementById('textField').value" />
  </p>
  <h3><div id="div"></div></h3>
0 голосов
/ 22 декабря 2019

Я нашел несколько проблем в вашем коде, позвольте мне резюмировать это здесь:

  1. Для элемента input для предоставленного пользователем текста у вас есть <input type="text">, который должен иметь атрибут id какхорошо, чтобы поймать на getElementById.
  2. . Чтобы найти элемент прицеливания, вам необходимо также указать правильное значение id или class. Я думаю, с помощью message_container вы можете достичь этого, используя document.getElementsByClassName('message_container')[0]. Затем вы можете установить значение этого элемента с помощью свойства innerHTML.

Поэтому, основываясь на моем объяснении, я думаю, что это решение может работать для вас: 

const ausgabe = () => {
  const textInput = document.getElementById("text");
  const messageContainer = document.getElementsByClassName('message_container')[0];
  messageContainer.innerHTML = textInput.value;
}
<div class="Webview">
  <div class="message_container" id="myForm"></div>
  <form class="send_container">
    <input id="text" type="text" />
    <button type="button" onclick="ausgabe()">Nachricht absenden</button>
  </form>
</div>

Надеюсь, это поможет!

...