[TIL #12 WECODE] Westagram 댓글기능 구현(main.html)

210227 WECODE #12

<script>
let clickBtn = document.getElementsByClassName('comment_button')[0];
let textarea = document.getElementsByClassName('comment_textarea')[0];

function addFunc(){
    let hashtag = document.getElementsByClassName('section_hashtag')[0];
    let addElement = document.createElement('div');
    let addText = document.createTextNode(textarea.value);

    addElement.appendChild(addText);
    hashtag.appendChild(addElement);
}

clickBtn.addEventListener('click', addFunc);
textarea.addEventListener('keypress', function(e){
    if(e.keyCode === 13){
        addFunc();
    }
});
</script>

• textarea댓글 창에 댓글을 쓰고 게시button이나 Enter를 눌렀을때, hashtag공간에 댓글이 입력되는 코드이다.
• 나는 createElement와 createTextNode를 둘다 써서
  appendChild로 묶어주었는데
• createTextNode대신에 innerHTML을 사용하여 구현해도 좋을 법한 방법 일것 같다.

• addEventListener의 단점은 1번째 인덱스 구간에 키이벤트를 하나밖에 출력하지 못한다는 점인데
• click과 keypress + keycode===13으로
  이벤트 리스너를 두개 호출하여 구현을 해보았다.
• if( click이벤트 || keycode===13)가 가능한 코드도 구현해보아 한 로직으로 출력할 수 있다면 그것또한 좋은 방법일 것 같다.