[JS] 댓글 달기

bin·2023년 1월 14일
0

댓글을 만들었습니다. 데이터베이스와 연결하지 않아서 저장이 안되는 간단한 댓글입니다.

1. HTML 부분

<ul class="comment-ul">
            
</ul>
<input type="text" onkeyup="enterkey()" placeholder="댓글달기" class="addComment" />
<button class="comment-button">게시</button>

2.js 부분

const comment = document.querySelector(".addComment");
const commentText = document.querySelector(".comment-ul");
const commentBtn = document.querySelector(".comment-button")

function enterkey() {
  if(window.event.keyCode == 13) {
    commentEvent()
  }
}

function commentEvent() {
  const commentValue = comment.value; 
  const newComment = document.createElement("li");
  newComment.classList.add("comment");
  newComment.innerHTML=`<span class="name">you</span><span>${commentValue}</span>`;
  commentText.append(newComment);
  comment.value= "";
}

commentBtn.addEventListener("click", commentEvent);

엔터키 또는 버튼 누르면 게시되게 구현했습니다. CSS는 댓글처럼 보이도록(?) 각자 꾸미시면 될듯합니다

profile
프론트엔드부터 공부하고 있습니다

0개의 댓글