TIL. [javascript] 댓글 구현 1 (getElementById)

인스타그램을 클론 코딩하는 과정에서 피드에 댓글을 올리는 기능 구현을 해야 했다. css로 열심히 레이아웃을 뚝딱딱 만들고 갑자기 자바스크립트로 기능을 구현하려니 회로가 정지된 느낌이었다. 그래도 해야할 것은 해야하는 법. 어떻게 구현할지 차근차근 생각해봤다.

먼저 필요한 인자를 생각했다. 인스타그램 피드 댓글에는 아이디와 댓글 내용이 담긴다. 이 두 개를 인자로 삼은 함수로 댓글 내역에 댓글을 넣으면 되는 것이다. 첫 번째 인자는 비교적 간단하다. username등의 변수를 만들고 아이디를 적으면 되기 때문이다. 그렇다면 댓글 내용은 어떻게 가져올 수 있을까?

일단 난 댓글을 적는 곳을 input으로 구현했다. 때문에 input 안에 담긴 내용을 값을 가져와야 하는 것이다. 대충 구글에서 javascript input value등을 검색했다. 찾아보니 이런 내용이 나왔다.

//js
function printName()  {
  const name = document.getElementById('name').value;
  document.getElementById("result").innerText = name;
}

<!--HTML-->
<input id='name' onkeyup='printName()'/>
<div id='result'></div>

input의 id를 ‘name’으로 지정하고 printName() 함수에서 키가 눌러졌을 때마다 발생하는 이벤트를 지정해 메소드를 호출한다. 그리고 해당 자바스크립트는 document.getElementById를 통해 name으로 지정된 id의 값을 가져오고, 다시 이 값을 읽어와 name이란 변수로 지정한다는 의미다.

나는 이 함수를 이용해 댓글 내용을 가져오는 아래의 함수를 만들었다.
function commentValue() { const comment = document.getElementById('createComment').value;}