[JS] 버튼 클릭으로 특정문장 hide/show
예제
hide
버튼을 누르면<h1>
인 junlee가 사라지도록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>
//전체적으로 보자면 버튼을 클릭하면 해당 함수들이 나오도록 설정됨
Author And Source
이 문제에 관하여([JS] 버튼 클릭으로 특정문장 hide/show), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ho2yahh/JS-버튼-클릭으로-특정문장-hideshow저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)