[자바스크립트] 목록창에서 Click 이벤트와 입력창의 초기화와 포커스

어떤 목록을 추가할 때 필수적으로 추가버튼이 있을 것이고 추가가 완료된 후에 글을 입력하는 입력란이

초기화되는 것이 사용자가 접근하기 편할 것이다.

자주 사용하는 click이번트에서의 addEventListener()함수와 querySelector를 이용한 내용의 초기화와 자동으로 

마우스와 초점이 맞춰져있는 focus함수에 대해서 기억해두자.

 

추가 버튼을 만들 때는 Html문서에서 선택자를 갖고와서 변수에 넣고 해당 변수를 addEventLister()함수를 사용해서 이벤트(동작)을 함수를 사용해서 클릭과 addList()함수를 실행하면된다.

 

var addbtn = document.querySelector("#add");

addbtn.addEventListener("click", addList)를 사용하면 id태그의 add의 추가버튼이 이벤트를 받고 클릭되면 addList()함수를 작동시킨다.

 

참고로 목록에 내용이 있어야 다음 항목이 추가 되므로 이럴 때는 if문을 사용해서 

if(contents != null){

 contentsList.push(contents) 

} 을 사용한다 

여기서 contents != null(유효하지 않은 값, 값이 X)이 가리키는 것은 목록에 내용이 있다는 것을 쓰기에 true값만을 출력하는 if문을 사용했다 .

 

그리고 목록이 추가된 후에 새로운 입력란에 내용을 비우는 것으로 시작하고 커서창이 올라오게 하는 기능은 

.value와 focus()함수를 사용하면되는데

Html요소에서 쿼리 설렉터를 이용해서 사용한다.

document.querySelector("#contents").value=" ";

document.querySelector(#contents").focus();

로 텍스트 입력란의 필드에 contents 요소값을 지우고 focus함수를 적용시킨다.