如何在文本框中显示输入的文本？

Question

我想在输入字段中输入文本并将其显示在文本框中。

我觉得很简单。我需要一个 Input 来输入文本，一个按钮和一个文本框来显示我的文本。但是我的代码不起作用。

这是我的代码：

<!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%;
}

Answer 1

我认为您不知何故对 id 和命名产生了一些误解，您正在尝试访问名称错误的元素 - 解决方案如下：

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

Answer 2

我在您的代码中发现了一些问题，让我在这里总结一下：

对于用户提供的文本的 input 元素，您有 <input type="text">，它也应该有一个 id 属性，以便被 getElementById.[=36 捕获=]
为了找到目标元素，您还需要提供适当的 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>

希望对您有所帮助！

如何在文本框中显示输入的文本？

How to display entered text in an textbox?

html

javascript

css

textbox