Question

我希望输入的文本显示在气泡中。我该如何更改代码才能使其正常工作？

我的HTML代码是这样的：

<!DOCTYPE html>
<link rel="stylesheet" href="style.css">

<div class="Webview">

  <div class="message_container" id="myForm">
    <div class="Chat_Bubble"></div>
  </div>

  <form class="send_container">
    <input id="textField" type="text">
    <p>
      <input type="button" id="theButton" value="Nachricht absenden!" onclick="document.getElementById('myForm').innerHTML=document.getElementById('Chat_Bubble').value.innerHTML=document.getElementById('textField').value" />
    </p>
    <h3>
      <div id="div"></div>
    </h3>
  </form>
</div>

Answer 1

您无需同时设置myForm.innerHTML 和 Chat_Bubble.innerHTML。您可以使用：

document.getElementById('myForm').children[0].innerHTML = (...)或
document.getElementsByClassName('Chat_Bubble').innerHTML = (...)。您需要使用类名称来获取元素，因为div具有class，而不是id。

此外，最好使用textContent代替innerHTML。这样，您可以确保浏览器将提交的元素视为文本。仍然使用innerHTML可能会中断您的页面。我在下面的代码中对此进行了更改。

例如，您应该尝试提交<b>（屏幕上没有任何内容）。

以下代码有效：

<!DOCTYPE html>
<link rel="stylesheet" href="style.css">

<div class="Webview">

  <div class="message_container" id="myForm">
    <div class="Chat_Bubble"></div>
  </div>

  <form class="send_container">
    <input id="textField" type="text">
    <p>
      <input type="button" id="theButton" value="Nachricht absenden!" onclick=" document.getElementsByClassName('Chat_Bubble')[0].textContent = document.getElementById('textField').value" />
    </p>
    <h3>
      <div id="div"></div>
    </h3>
  </form>
</div>

如何在聊天气泡中获取文字？

1 个答案: