JS - 텐키리스 계산기 #4 (classList)

1. 코드 작성

...
<script>

	document.addEventListener('keydown', (e)=>{const key =
	document.getElementById(e.key);
   	if(key) {key.classList.add("keyIn")}
   	});
    
        
	document.addEventListener("keyup", (e)=>{const key =
    	document.getElementById(e.key);
  	if(key) {key.classList.remove("keyIn")}
    	});
        
</script>

2. classList의 수정이 가능한가?

계산기를 제작할 때, 각 요소를 누를 때마다 입력 정보도 가져와야 하고, 눌렀을 때
이벤트를 시각적으로도 표현하고 싶었다.
입력 정보야 따로 let을 써서 저장하면 되지만, 키가 눌렸을 때 css를 변화시키는게 문제였다.
그래서 찾았던 것이 classList였다. 이를 통해 class 값을 수정하여 class에 keyIn 값이 있을 때만 style이 나타나게 할 수 있었다.
if등의 다른 방법을 활용할 수도 있겠으나, 우선 이 방법을 사용하였다.

그런데, classList는 원래 읽기 전용이다. 하지만 add와 remove를 사용하여 변화시킬 수 있다.
https://developer.mozilla.org/ko/docs/Web/API/Element/classList

따라서 keydown과 keyup을 통해 우선 키 입력이 시각적으로 보이게 하였다.
css는 아래와 같이 추가해 주었다.
.keyIn{background-color: burlywood;}