[사전 스터디 Week 4] 댓글 추가 이벤트 함수 만들기

필요한 코드

• HTML
  • 댓글을 입력할 <input> 요소 필요
  • 클릭할 추가 버튼 필요
  • 댓글이 담길 영역(<ul> 필요)

• JavaScript
  • ‘추가’ 버튼 클릭 이벤트 리스너
  • 댓글을 추가하는 함수!
    • 댓글 입력창의 값을 가져와서 댓글 영역에 추가합니다.
    • appendChild 안 잊으셨죠?

내가 작성한 코드!

// html
댓글 입력:
<input id="comment">
<button id="btn">추가</button>

<ul id="comments-list">
</ul>

// javascript
function addComent() {
  // 댓글 입력된 값 받아오는 변수
  const comment = document.getElementById('comment').value;
  // 입력될 댓글들은 li로 추가해주기
  const commentContent = document.createElement('li')
  // list의 내용은 comment로 
  commentContent.innerText = comment;
  
  document.getElementById("comments-list").appendChild(commentContent)
 
}

const btn = document.getElementById('btn');
btn.addEventListener('click', addComent)

이벤트는 아직도 감이 잘 잡히지 않는다. 그래도 조금씩은 머리에 쌓이는 것 같다.

일단 이벤트를 어떻게 실행시킬지에 관한 함수를 만들고, 그 블럭 안에는 값을 받아오는 변수(getElementById 혹은 querySelector 사용), 추가해야하는 태그(createElement), 바꿀 내용 (innerText 혹은 innerHTML), 그리고 어디에 붙일지(appendChild)를 입력한다. 그 후, 타겟 엘리먼트에 이벤트 종류(click 등)와 앞서 만들어두었던 함수를 작성하면 된다.

여기에서 주의할 점은addEventListener 인자에 함수의 이름만 쓰는 것! 이 코드로 예를 들자면 addComent()라고 쓰면 안된다는 것을 주의해야한다.

이렇게 줄글로 쓰니까 더 이해가 안 되는 것 같지만서도...^^...... 더 공부해야지 뭐~~~🥲