Question

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

我认为这很容易。我需要一个输入框来输入文本，一个按钮和一个文本框来显示我的文本。但是我的代码不起作用。

这是我的代码：

<!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捕获。
为了找到目标元素，您还需要提供适当的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>

我希望这会有所帮助！

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

2 个答案: