JavaScript에서 요소 숨기기 및 표시하기 버튼

이 섹션에서는 페이지 요소를 숨기고 표시하는 방법을 배울 것입니다. 평소처럼, 간단한 것부터 시작하여 점점 복잡하게 만들어 보겠습니다.

준비 운동으로 문단과 두 개의 버튼이 있다고 가정해 봅시다:

<p id="elem">text</p>
<input type="submit" id="show" value="show">
<input type="submit" id="hide" value="hide">

변수에 요소에 대한 참조를 가져옵니다:

let elem = document.querySelector('#elem');
let show = document.querySelector('#show');
let hide = document.querySelector('#hide');

이제 한 버튼을 클릭하면 문단이 숨겨지고, 다른 버튼을 클릭하면 표시되도록 만들어 봅시다. 이를 위해 요소에 해당 CSS 클래스를 추가하거나 제거하겠습니다:

.hidden {
	display: none;
}

문제를 해결해 봅시다:

hide.addEventListener('click', function() {
	elem.classList.add('hidden');
});

show.addEventListener('click', function() {
	elem.classList.remove('hidden');
});

내 코드를 수정하여 버튼이 하나만 있도록 하세요. 이 버튼을 첫 번째 클릭하면 요소가 표시되고, 두 번째 클릭하면 숨겨지도록 만드세요.