과제 도와주세요 마감 이틀 전!!

제가 학교 과제로 만드는 웹사이트에 채팅 페이지가 포함되어 있습니다.

그런데 채팅과 이미지 삽입은 로컬로는 구현을 하였습니다.

하지만 거래라는 특수한 기능이 있어야 하는데

div를 추가해서 거기에 상품의 가격을 적고

수락 과 거절을 골라 수락을 고르면

판매자에게는 판매자에게 계좌를 적는 input이 생기고

구매자는 그 계좌를 클릭하면 바로 결제를 할 수 있게 하려고 하는데

거래라는 특수한 기능이 채팅창에 출력이 이상하게 됩니다.

제가 만든 거지만 너무 복잡해서 js를 못하는 저는 수정을 못하겠더라고요

저는 거래가 채팅이나 이미지 처럼

거래를 하고 채팅을 치거나 이미지를 삽입하면 잘 넘어가게 그렇게 되면 좋겠는데

말로 설명하긴 어렵네요.

대충 이미지와 채팅은 자신말고는 가로줄에 아무것도 포함하지 않고 다른 채팅이나 이미지를 치면

다음 줄에 생기고 자동으로 아래로 스크롤이 되는데 제 '거래'는 방금 말한 기능 단 한개도 적용이 안됩니다

도와주세요!!

최대한 빨리 부탁드려요!

이틀 뒤 마감이예요 제발~~!

file:///C:/Users/User/Documents/extra/extra-chat.html

코드가 너무 길어서 적지 못한 점

정말 너무 죄송합니다.

링크 들어가셔서 개발자 모드로 코드 봐주시고

도움 좀 주세요 제발!! T_T

안녕하세요, 인프런 AI 인턴입니다.
진건희님, 웹사이트에서 구현 중인 채팅과 거래 기능 관련 문제를 해결하시고자 도움을 요청하셨군요. 불행히도 저는 직접 링크에 접속할 수 없어 코드를 직접 확인하거나 수정을 도와드릴 수는 없습니다. 하지만 몇 가지 일반적인 조언을 드릴 수 있습니다.

구조 확인: 거래 관련 요소가 제대로 출력되지 않는 경우 DOM의 구조를 확인하십시오. 거래 요소가 채팅이나 이미지가 추가되는 컨테이너 내부에 올바르게 위치하도록 하여 CSS 스타일이 적용될 수 있게 해야 합니다.
이벤트 핸들링: ‘수락’ 혹은 ‘거절’ 버튼에 대한 이벤트 핸들러를 다시 점검하십시오. 클릭이벤트가 올바르게 작동하여 필요한 입력 폼이나 계좌 정보를 동적으로 생성하도록 구현되어야 합니다.
스크롤 동작: 자동 스크롤이 안 되는 경우, 메시지가 추가될 때마다 스크롤 포지션을 조정하는 JavaScript 코드를 추가하셔야 합니다. 예를 들어 element.scrollTop = element.scrollHeight;와 같은 코드를 사용할 수 있습니다.
스타일링: CSS를 사용하여 각 채팅, 이미지, 거래 요소의 스타일을 제어하여, 원하는 레이아웃을 얻을 수 있습니다. display: block;, width: 100%;와 같은 속성이 유용할 수 있습니다.
디버깅: 개발자 도구를 활용하여 콘솔로 에러를 확인하고, 브레이크 포인트를 사용하여 JavaScript 코드의 실행을 단계별로 추적해보십시오.

제한된 정보로 구체적인 코드 수정을 제안드리기 어려움을 양해 부탁드리며, 위 조언들을 검토하면서 문제를 해결할 수 있는 실마리를 찾으시길 바랍니다. 마감 기한이 임박하셨다면 동료나 선생님과 같이 코드를 함께 검토해보는 것도 좋은 방법일 수 있습니다.

추가적으로 문제 해결에 여전히 어려움이 있다면 인프런에 있는 웹 개발 관련 강의를 참고하시거나 혹은 개발자 커뮤니티, 포럼에 질문을 올려 도움을 받아보시는 것을 추천드립니다. 프로젝트 완성을 위해 행운을 빕니다!

인프런 커뮤니티 질문&답변