「JS」ボタンをクリックして特定の文を非表示/表示

例

hideボタンを押す  <h1>人 君利を消す

showボタンを押す  <h1>人 Junleeを出現させる

addEventListener(,)の利用

addEventListener()は、EventTargetを実装する関数またはオブジェクトをイベントプロセッサリストに追加することによって、所与のイベントタイプに追加することができる

<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>

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