자바스크립트로 댓글 수정 만들기

 자바스크립트로 댓글을 구현했을 때 처음 문제는 DOM에서 어떻게 수정 버튼을 누른 그 리스트를 찾아내는가였다. 처음에는 단순히 id로 해결하려 했지만, 당연히 댓글의 개수가 두 개 이상이 되면 먹히지 않았다. 그래서 알아낸 것이 class로 정의한 다음, addEventListener('click', function(e) {...}) 에서 e.target을 이용하는 것이었다. e.target은 이벤트가 생긴 그 노드를 반환하는데, parentNode를 이용하여 li를 찾아내고, li.getElementsByClassName()을 이용하여 각각의 element에 접근할 수 있었다.

 

 두 번째 문제는 수정 버튼을 눌렀을 때 수정 폼으로 리로딩 없이 만들면서, 수정 폼으로 바뀐 상태에서 다른 댓글의 수정 버튼을 누르면 기존 수정 폼이 사라지게 만드는 것이었다. 이는 다음과 같이 해결했다.

let tempInnerHTML;
let tempTarget;
let flag = false;

document.getElementById('replies').addEventListener('click', function(e) {
    if (e.target.classList.contains('updateReply')) {
        let li = e.target.parentNode;
        let replyWriter = li.getElementsByClassName('replyWriter')[0];
        let createReplyWriter = document.getElementById('createReplyWriter');

        if (replyWriter.innerText != createReplyWriter.value) {
            alert('댓글을 수정할 권한이 없습니다.');
            return;
        }

        if (flag) {
            tempTarget.innerHTML = tempInnerHTML;
        }

        tempInnerHTML = li.innerHTML;
        let replyId = li.getElementsByClassName('replyId')[0].value;
        let replyContent = li.getElementsByClassName('replyContent')[0];
        let values = replyContent.innerText;

        tempTarget = li;
        flag = true;

        li.innerHTML =
            '<input hidden class="replyId" value="' + replyId + '">' +
            '<p><textarea class="replyUpdateContent">' + values + '</textarea></p>' +
            '<button class="replyUpdateConfirm btn btn-default">수정 완료</button>' +
            '<button class="replyUpdateCancel btn btn-default">취소</button>';
 }

 여기서 중요한 것은 수정 버튼을 누르기 전의 HTML을 저장하는 tempInnerHTML과, 현재 수정 폼으로 바뀌어 있는 노드를 가리키는 tempTarget, 현재 수정 폼으로 바뀌어 있는 지를 알려주는 flag이다.

 여기서 주의해야 할 것이 tempTarget = li; 이다. 처음에는 tempTarget = e.target; tempTarget.parentNode ~~~ 이런 식으로 사용했었는데 이렇게 하면 tempTarget이 null이 된다. 그 이유는 마지막에 수정 폼으로 바꿀 때 e.target 인 버튼이 사라지고 새로운 버튼이 만들어지기 때문이다. 그래서 반드시 없어지지 않는 e.target.parentNode 와 같은 것으로 tempTarget에 집어 넣어야 한다.