[JS] 버튼 클릭으로 특정문장 hide/show

예제

1. hide버튼을 누르면 <h1>인 junlee가 사라지도록
2. show버튼을 누르면 <h1>인 junlee가 나타나도록
   

addEventListener( , ) 활용

addEventListener()는 EventTarget의 주어진 이벤트 유형에, EventListener를 구현한 함수 또는 객체를 이벤트 처리기 목록에 추가해 작동

<script>
const text = document.querySlectorAll('h1');
const hidebtn = document.getElementById('hide');
const showbtn = document.getElementByid('show');
//(1)h1과 hide, show 버튼에게 변수 설정해줌

function disappear(){
	text[0].style.display = "none";
}
function appear(){
	text[0].style.display = "block";
}
//(3) 함수를 작성해주었는데 disappear함수가 실행되면 text변수의 값이 디스플레이에서 없어지게해주고, appear 함수를 실행하면 block 형태의 타입으로 만들어줘

hidebtn.addEventListener("click", disappear);
showbtn.addEventListener("click", appear);
//(2)이 것을 함수보다 먼저입력해줌
</script>

//전체적으로 보자면 버튼을 클릭하면 해당 함수들이 나오도록 설정됨