如何在文本框中顯示輸入的文本？

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捕獲。
為了找到一個目標元素，你還需要提供一個適當的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 個解決方案

解決方案1
1 已采納 2019-12-22 13:15:38

解決方案2
1 2019-12-22 13:20:57

如何在文本框中顯示輸入的文本？

問題描述

2 個解決方案

解決方案1 1 已采納 2019-12-22 13:15:38

解決方案2 1 2019-12-22 13:20:57

解決方案1
1 已采納 2019-12-22 13:15:38

解決方案2
1 2019-12-22 13:20:57