JavaScript에서 선택/클릭 버튼 활성화

루프 없이 JavaScript에서 선택하거나 클릭한 버튼을 활성화하는 방법을 알아봅니다.

CSS 클래스를 추가하거나 하나 이상의 CSS 속성을 선택한 버튼에 직접 추가하여 활성화할 수 있습니다.

Add A Background Colour To A Selected Button

Add A CSS Class To A Selected Button

선택한 버튼에 배경색 추가

JavaScript에서 선택/클릭한 버튼에 CSS 스타일을 추가하여 활성화하고 싶을 때,

For Loop가 가장 먼저 생각나는 선택이 될 것입니다.

그러나 루프를 전혀 사용할 필요는 없습니다.

실제로 어떻게 하는지 봅시다.

HTML 버튼 요소 만들기

다음은 id 래퍼가 있는 간단한 div 태그입니다.

여기에는 5개의 HTML 버튼 요소가 있습니다.

멋진 것은 없습니다.

<div id="wrapper">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
</div>

클릭 이벤트를 HTML 버튼 요소에 연결

• 먼저 div 내부의 모든 요소에 클릭 이벤트 리스너를 추가해 보겠습니다.

const wrapper = document.getElementById("wrapper");

wrapper.addEventListener('click',(e) => {
})

• 클릭한 항목이 클릭 이벤트 콜백 함수 내부의 버튼인지 확인한다.

const isButton = e.target.nodeName === 'BUTTON';

• 클릭한 항목이 버튼이 아니면 클릭 이벤트 콜백 함수를 종료한다.

따라서 버튼 클릭이 아니면 더 이상 아무것도 실행하지 않습니다.

if (!isButton) {
    return;
}

클릭한 버튼에 CSS 속성 추가

클릭 이벤트 콜백 함수에 전달되는 이벤트 객체에 접근하여 선택/클릭 버튼에 배경색을 추가합니다.

e.target.style.background = 'red';

이 코드는 두 번째 버튼을 클릭할 때까지 제대로 작동합니다.

그러면 첫 번째 및 두 번째 클릭된 버튼 모두 활성 상태를 나타내기 위해 배경색이 빨간색이 됩니다.



그러나 우리가 원하는 것은 현재 클릭한 항목에만 배경색을 추가하고 이전에 선택한 항목에서는 제거하는 것입니다.

그러기 위해서는 이전에 선택/클릭한 버튼을 캡처하고 배경색을 제거해야 합니다.

이전에 선택/클릭한 항목 캡처

• 버튼 클릭 이벤트 외부에서 prevButton이라는 상수를 선언합니다.

• 초기값을 null로 설정합니다.

let prevButton = null;

• 이제 prevButton 상수에 추가된 버튼이 있는지 확인합니다.

그렇다면 값을 없음으로 설정하여 배경색을 제거하십시오.

if(prevButton !== null) {
   prevButton.style.background = 'none';
}

• 마지막으로 현재 클릭한 항목을 prevButton에 추가합니다.

이렇게 하면 사용자가 처음으로 버튼을 클릭할 때 prevButton에 이전에 클릭한 버튼 객체가 없습니다.

그리고 사용자가 아무 버튼이나 두 번째로 클릭하면 사용할 수 있게 됩니다.

 prevButton = e.target;

선택/클릭 버튼에 CSS 클래스 추가

• JavaScript를 통해 CSS 속성만 추가하면 약간의 제한이 있습니다.

항상 CSS 규칙을 별도로 생성하고 JavaScript 내에서 전환하는 것이 좋습니다.

• 단일 속성 background:red를 사용하여 .active라는 CSS 규칙을 정의합니다.

.active {
  background:red;
}

• 현재 클릭된 버튼 객체인 e.target에 .active 클래스를 추가합니다.

• prevButton에서 .active 클래스를 제거합니다.

let prevButton = null;

const wrapper = document.getElementById("wrapper");

wrapper.addEventListener('click', (e) => {

  const isButton = e.target.nodeName === 'BUTTON'; 

  if (!isButton) {
    return;
  }

  e.target.classList.add('active'); // Add .active CSS Class

  if(prevButton !== null) {
    prevButton.classList.remove('active');  // Remove .active CSS Class
  }

  prevButton = e.target;

});

이전과 동일하게 작동하지만 이번에는 .active 클래스를 사용하여 활성 버튼 상태의 스타일을 지정하는 데 더 많은 제어 권한이 있습니다.