时间戳

首页 > 解决方案 > 使用 javascript 时无法调整设计

javascript - 使用 javascript 时无法调整设计

问题描述

我只是想表明你可以发送你的消息，而不是硬编码我前端的所有消息。我使用了一个人已经开发的代码，这是链接https://codepen.io/FilipRastovic/pen/pXgqKK

我在输入字段中添加了 id="msg" 和 id="chatpanel" 其中类是聊天面板

附图片。现在，问题是消息被发送（仅在显示器中）b 但气泡位于输入区域下方现在，问题是消息被发送（仅在显示器中）b 但气泡位于输入区域下方。

这是我的附加 JS 代码。


function send(){
    
var msg = document.getElementById("msg").value;
var div1=document.createElement("div");
div1.classList.add("row","no-gutters");

  
  var div2=document.createElement("div");

  div2.classList.add("col-md-3","offset-md-9");
  

    
  
  var div3=document.createElement("div");
  div3.classList.add("chat-bubble","chat-bubble--right");
  

var text=document.createTextNode(msg);
  
  div3.appendChild(text);
  div2.appendChild(div3);
  div1.appendChild(div2);
  
  var main=document.getElementById("chatpanel");
  
  main.appendChild(div1);


}

标签： javascripthtmlcssbootstrap-4frontend

解决方案

这是因为消息输入框位于#chatpaneldiv中。当您将新消息附加到#chatpanneldiv 时，它将被添加到该 div 中的最后一个元素之后。您需要获取#msg输入（并且它包含 div）并将其移出#chatpanneldiv。

你的代码大致是这样的：

<div id="chatpannel">
    <div class="msg-box-container">
        <input type="text" id="msg" />
        <button type="button">Submit</button>
    </div>
</div>

你需要这样做：

<div id="chatpannel">
</div>
<div class="msg-box-container">
    <input type="text" id="msg" />
    <button type="button">Submit</button>
</div>

推荐阅读