westa_main page_댓글 달기

[Mission4] 댓글 내용 입력 후 Enter press, 혹은 게시 버튼 클릭 시 댓글 추가 기능

main.html

main.js

// "use strict";

// [Mission4] 댓글 내용 입력 후 Enter press, 혹은 게시 버튼 클릭 시 댓글 추가 기능

let inputComments = document.querySelector(".comments_input"); // 댓글 input
let submitBtn = document.querySelector(".posting_box"); // 게시 등록 버튼

  function commentsBox() {
    const box = document.querySelector(".main_left_box_comment");

    const comments = document.createElement("div");

    const userId = document.createElement("span");
    const commentsText = document.createElement("span");
    const likesBtn = document.createElement("button");

    comments.classList.add("comments_title");
    userId.classList.add("user_id");
    commentsText.classList.add("comments_contents");
    likesBtn.classList.add("comments_like_btn");


    userId.innerHTML = '<span class="user_id">아이디</span>'; // 닉네임 이름 불러오기 성공
    commentsText.innerText = inputComments.value;
    likesBtn.innerHTML = '<i class="fa-regular fa-heart"></i>'; // 하트 불러오기 성공

    comments.appendChild(userId);
    comments.appendChild(commentsText);
    comments.appendChild(likesBtn);

    box.appendChild(comments);

  }

// 게시 버튼 이벤트 구현
submitBtn.addEventListener("click", (event) => {

  commentsBox();
  inputComments.value = "";

});

// Enter 키로 댓글 추가 이벤트 구현
// keydown, keyup 댓글이 중복으로 달리는 오류가 있었는데 keypress 쓰니까 되는데 왜죠..
inputComments.addEventListener("keydown", (event) => {

  if (event.code === "Enter") {
    commentsBox();
    inputComments.value = "";
  }
  
});

1. inputComments, submitBtn 변수를 선언해주기

• Document.querySelector() 메소드를 이용해서 각각의 변수에 값을 할당해줍니다.

let inputComments = document.querySelector(".comments_input"); // 댓글 input
let submitBtn = document.querySelector(".posting_box"); // 게시 등록 버튼

• document.querySelector()를 이용해 inputComments 변수에 댓글 입력창을 할당해주었습니다.
• 게시 버튼이 동작될 수 있게 마찬가지로 .querySelector()를 이용해
  submitBtn 변수에 게시 버튼 창을 할당해주었습니다.
  
  

2. addEventListener() 메소드를 사용하여 text 창, 게시 버튼에 이벤트 구현하기

// 게시 버튼 이벤트 구현
submitBtn.addEventListener("click", (event) => {
 
  commentsBox();
  inputComments.value = "";
  
});


// keydown, keyup 댓글이 중복으로 달리는 오류가 있었는데 keypress 쓰니까 되는데 왜죠..
inputComments.addEventListener("keydown", (event) => {
  if (event.code === "Enter") { // 
    commentsBox();
    inputComments.value = "";
  }
});

• submitBtn에 click 이벤트가 발생하면, 그 이벤트 자체를 매개변수로 받아서 commentsBox() 함수가 호출되고(= 게시 버튼 이벤트 구현되고),
  그 이후에 댓글 입력창의 value는 ""; 공백의 값이 되면서 초기화 됩니다.

• event.preventDefault 메소드란? 기본(default)를 막다(prevent)라는 단어에서 유추 할수 있듯이 html에서 표준으로 제공하는 태그의 기본 이벤트 발생을 막는 메서드입니다.

• inputComments에 keydown 이벤트가 일어나고, 그 이벤트 자체를 매개변수로 받습니다. 들어온 이벤트의 event.code === enter라면,
  즉 엔터키를 누르면 commentsBox() 함수가 호출되고(= keydown 이벤트 구현), 그 이후에 댓글 입력창의 value는 위와 같이 ""; 공백의 값이 되면서 초기화 됩니다.

3. 이벤트 발생할 때 동작할 함수 선언하기

function commentsBox() {
    const box = document.querySelector(".main_left_box_comment"); // 댓글 추가하면 들어갈 공간의 div태그 가져옴

    const comments = document.createElement("div"); // 부모요소 역할을 할 div 태그 할당

    const userId = document.createElement("span"); // 사용자의 id가 찍힐 span 태그 할당
    const commentsText = document.createElement("span"); // 사용자의 댓글이 찍힐 span 태그 할당
    const likesBtn = document.createElement("button"); // 댓글 오른쪽에 찍힐 작은 하트에 button 태그 할당

    // .classList.add() 메소드를 사용해서 class를 추가
    comments.classList.add("comments_title");
    userId.classList.add("user_id");
    commentsText.classList.add("comments_contents");
    likesBtn.classList.add("comments_like_btn");

    // .innerHTML 와 .innerText 를 사용해서 div 안의 내용 읽어오기 
    userId.innerHTML = '<span class="user_id">아이디</span>'; // 닉네임 이름
    commentsText.innerText = inputComments.value; // 댓글 내용
    likesBtn.innerHTML = '<i class="fa-regular fa-heart"></i>'; // 하트 아이콘

    // 자식요소를 부모요소의 순서대로 넣어주는 .appendChild() 메소드로 구조 잡기 
    comments.appendChild(userId); 
    comments.appendChild(commentsText);
    comments.appendChild(likesBtn);

    box.appendChild(comments);

  }

• box 라는 변수에 댓글 추가하면 들어갈 공간의 div태그를 .querySelector()를 이용해 할당합니다.
• 위와 마찬가지로 comments, userId, commentsText, likeBtn 이라는 변수를 선언하여 댓글 구조들에 각각의 태그를 할당합니다.
• 이후 자식요소를 부모요소의 순서대로 넣어주는 .appendChild() 메소드로 구조를 잡습니다.
• 최종적으로 box 의 자식요소로 comments 를 할당해주면 댓글이 들어갈 공간에 차례대로 넣어집니다.
  
  
• 이제는 .classList.add() 메소드를 사용해서 class 를 추가하여 css 를 적용시켜 주어야 합니다.
• 이 함수는 기존의 class에 새로운 클래스를 추가해줍니다.
  className에 문자열을 추가 <-> element.classList.add() 메소드
  이 둘의 다른점은 문자열 앞에 스페이스를 입력하지 않아도 된다는 점,
  추가하려는 클래스가 이미 class 속성에 포함되어 있다면, 추가하지 않는다는 점입니다.
  
  
• .innerHTML 와 .innerText 를 사용해서 div 안의 내용 읽어옵니다.
• .innerText 는 element 안의 text 값들만을 가져오고,
• .innerHTML 은 innerText와는 달리 element 안의 HTML이나 XML을 가져옵니다.

기능 구현 완료