특정 요소 숨기는 기능 classList.toggle() 사용.

JavaScript

btnClacRecord.addEventListener('click', () => {
    const record = document.getElementById("calc-record");
    record.classList.toggle("hidden-record");
});

 

CSS

#calc-record
{  
    border-radius: 0.5em;
    border: none;
    resize: none;
    height: 22em;
    width: 18.6em;
    position:absolute;
    background-color:beige;
}

.hidden-record {
  display: none;
}

 

HTML

<textarea name="기록" id="calc-record" class="hidden-record"></textarea>

 

동작 원리는 

JavaScript에서 HTML에 있는 특정 요소의 아이디 값을 가져와 클래스 속성을 토글 옵션으로 넣어준다 (버튼을 눌렀을때 생성 소멸을 동시에 할 수 있도록.)

 

CSS에서는 클래스에 diplay:none; 옵션을 주어 해당 요소가 사라졌다가 생겼다가 반복하도록 만듬.

 

case 1. 구동 시 해당 요소가 보이지 않고 버튼을 눌렀을 때 요소가 보이도록 설정

: HTML에 클래스를 넣어두면 CSS 스타일이 적용되어 처음부터 요소가 없어진 상태로 나옴.

 

case 2. 구동 시 해당 요소가 보이고 버튼을 눌렀을 때 요소가 사라지도록 설정

: HTML에 class를 지정하지 말 것. 

 

버튼을 눌렀을 때 이런 느낌으로 동작