在不知道位置的情况下使输入的文本显示在屏幕上

艾伦百吉饼

我如何让用户输入一些文本（例如在文本区域中），并将其显示在屏幕上。如果用户输入另一条消息，程序应在第一条消息下方显示该消息，依此类推。到目前为止，用户可以输入一条消息并替换一个已经定义的空 p 元素。这在用户输入单个消息时有效，但当您输入多次时，新文本将替换 p 元素中的旧文本。以下是我迄今为止尝试过的。

function displayText(element, change_to) {
  document.getElementById(element).textContent =
    document.getElementById(change_to).value;
  document.getElementById(change_to).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;
}

<p id="msg" class="extraSpace"></p>
<textarea id="enterMsg" placeholder="Enter your message here..."></textarea>
<button id="sendButton" onclick="displayText('msg', 'enterMsg')">Send</button>

<!-- begin snippet: js hide: false console: true babel: false -->

雅各布洛克伍德

function displayText(element, change_to) {
  document.getElementById(element).textContent += 
  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~^^^^^~~~~~~~~~
    document.getElementById(change_to).value;
  document.getElementById(change_to).value = "";
}

<p id="msg" class="extraSpace"></p>
<textarea id="enterMsg" placeholder="Enter your message here..."></textarea>
<button id="sendButton" onclick="displayText('msg', 'enterMsg')">Send</button>

或者更好：

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 = "";
}

<p id="msg" class="extraSpace"></p>
<textarea id="enterMsg" placeholder="Enter your message here..."></textarea>
<button id="sendButton">Send</button>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。