在用戶輸入的屏幕上分隔文本

Question

我有一個 HTML 頁面，其中有一個<textarea>元素。 假設我有一個發送按鈕，可以在屏幕上顯示消息。 當發送多條消息時，它們的 position 將移動到上一條發送的消息下方。 新消息將放在單獨的容器中（我做了邊框）。 我已經使用了這個有效的代碼。 實際上，它並沒有完全奏效。 當您輸入多條消息時，它不會創建包含消息的新消息邊框，而是將所有文本放在同一個元素中。

 const button = document.getElementById("sendButton"); button.addEventListener("click", displayText); function displayText() { const display = document.getElementById("msg"); const textArea = document.getElementById("enterMsg"); display.append( textArea.value, document.createElement("br") ); textArea.value = ""; }

 body { background-color: skyblue; font-weight: bolder; } #enterMsg { margin-top: 34%; height: 130px; width: 100%; font-family: Arial, sans-serif; font-size: 15px; color: darkorange; background-color: #d796ff; font-weight: bolder; }.enterText { font-family: Arial, sans-serif; font-size: 15px; color: darkorange; background-color: #d796ff; font-weight: bolder; } #sendButton { margin-left: 96%; } #msg { margin-left: 80%; border: solid; border-color: #b19cd9; background-color: #b4ff94; border-radius: 50px; color: darkorange; }.extraSpace { padding: 5px; } textarea::placeholder { color: darkorange; } div.centered { text-align: center; border: solid; border-color: blue; margin-top: 10%; margin-bottom: 10%; }.confirmButton { text-align: center; margin-bottom: 5px; }

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Main Page</title> <link rel="stylesheet" href="style.css"> <script src="tools.js"></script> </head> <body> <p id="msg" class="extraSpace"></p> <textarea id="enterMsg" placeholder="Enter your message here..,"></textarea> <button id="sendButton" onclick="displayText('msg', 'enterMsg')">Send</button> </body> </html>

正如我所說，此代碼有效，但它將所有消息放在一個元素中。 有什么辦法可以使新邊框出現，其中包含輸入的文本，而不是將每條消息放入單個元素中？

Answer 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Main Page</title>
    <link rel="stylesheet" href="style.css">
    <script src="tools.js"></script>
</head>
<body>
    <div id="messages"></div>
    <textarea id="enterMsg" placeholder="Enter your message here..."></textarea>
    <button id="sendButton" onclick="displayText('msg', 'enterMsg')">Send</button>
</body>
</html>

const button = document.getElementById("sendButton");
button.addEventListener("click", displayText);


const textArea = document.getElementById("enterMsg");
const container = document.getElementById("messages");
function displayText() {
  // Create a new element with the message as it's inner text.
  const message = document.createElement("p");
  message.innerText = textArea.value;
  message.setAttribute("class", "msg");

  // Add that to the document
  container.appendChild(message);

  textArea.value = "";
}

您還必須更改樣式表，因為msg現在是 class 而不是 ID（因為其中會有多個

在用戶輸入的屏幕上分隔文本

問題描述

1 個解決方案

解決方案1
2 2021-04-29 20:54:12

在用戶輸入的屏幕上分隔文本

問題描述

1 個解決方案

解決方案1 2 2021-04-29 20:54:12

解決方案1
2 2021-04-29 20:54:12