자바 스크립트를 사용할 때 디자인을 조정할 수 없습니다.

debugcn 에 게시 Dev

파르 젠 살렘

나는 당신이 당신의 메시지를 보낼 수 있고 내 프런트 엔드의 모든 메시지를 하드 코딩하는 것이 아니라는 것을 보여 주려고합니다. 나는 이미 한 사람이 개발 한 코드를 사용했습니다. https://codepen.io/FilipRastovic/pen/pXgqKK

입력 필드에 id = "msg"를 추가하고 class가 chat-panel 인 id = "chatpanel"을 추가했습니다.

이미지가 첨부되었습니다. 이제 문제는 메시지가 (디스플레이에서만) 전송되지만 버블이 입력 영역 아래에 배치된다는 것입니다.

여기에 내 추가 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);


}

nvkrj

메시지 입력 상자가 #chatpaneldiv 에 있기 때문 입니다. 새 메시지를 #chatpanneldiv에 추가하면 해당 div의 마지막 요소 뒤에 추가됩니다. #msg입력 (그리고 div 포함) 을 가져 와서 div 밖으로 옮겨야합니다 #chatpannel.

코드는 대략 다음과 같습니다.

<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>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-5

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

자바 스크립트를 사용할 때 디자인을 조정할 수 없습니다.

자바 스크립트를 사용할 때 디자인을 조정할 수 없습니다.

GWT에서 외부 자바 스크립트를 사용할 수 없습니다.

자바 스크립트와 함께 Firebase를 사용할 때 '초기화 전에'firebase '에 액세스 할 수 없습니다.'오류가 발생합니다.

내 자바 스크립트를로드 할 수 없습니다.

"ng-list"를 사용할 때 자바 스크립트에서 변수 모델에 액세스 할 수 없습니다.

자바 스크립트를 사용하여 Google 설문지에 입력 값을 설정할 수 없습니다.

사용자 정의 된 쉘 스크립트를 실행할 수 없습니다.

사용자 지정 C # 웹 브라우저는 자바 스크립트를 지원할 수 없습니다.

외부 자바 스크립트 .js 파일을 사용할 수 없습니다.

심층 자바 스크립트 기능을 사용할 수 없습니다.

자바 스크립트 변수를 재정의 할 수 없습니다.

자바 스크립트로 요소를 만들 때 Bootstrap 툴팁이 작동하도록 할 수 없습니다.

자바 스크립트를 사용하여 리디렉션 할 수 없습니다.

자바 스크립트는 xul의 oncommand를 사용할 수 없습니까?

자바 스크립트는 xul의 oncommand를 사용할 수 없습니까?

계산할 때 자바 스크립트를 신뢰할 수 있습니까?

계산할 때 자바 스크립트를 신뢰할 수 있습니까?

자바 스크립트에서 함수 외부의 변수를 사용할 수 없습니다.

자바 스크립트 : clearTimeout을 할 수 없습니다

자바 스크립트를 사용하여 할당 된 입력 필드 '값'을 가져올 수 없습니다.

자바 스크립트를 사용하여 버튼을 활성화 할 수 없습니다.

자바 스크립트를 사용하여 버튼을 활성화 할 수 없습니다.

자바 스크립트를 사용하여 테이블 행을 추가 할 수 없습니다.

bash 스크립트는 사용자가 스크립트를 실행할 때 어떤 디렉토리인지 알 수 있습니까?

자바 스크립트에서 사용 된 참조는 catch-Block 내에서 사용할 수 없습니다.

사용자가 자바 스크립트를 사용하여 입력 할 때 어떻게 팝업을 표시 할 수 있습니까?

Phonegap에서 네이티브 자바 스크립트 배열 함수를 사용할 수 없습니다.

Font Awesome을 사용할 때 문자를 볼 수 없습니다

자바 스크립트를 사용하여 필터링 된 요소를 클릭 할 수 없습니다

div 태그를 숨기는 데 자바 스크립트를 사용할 수 없습니다.