JavaScript에서 활성화 스타일 교체하기

이전 강의에서는 셀을 클릭하여 활성화하는 방법을 배웠습니다. 이제 색상을 교체해 보겠습니다: 첫 번째 셀은 빨간색, 두 번째 셀은 초록색, 세 번째 셀은 다시 빨간색으로 칠해지도록 합니다.

이 문제를 해결하려면 두 개의 CSS 클래스가 필요합니다:

css.color1 {
  background: red;
}
.color2 {
  background: green;
}

설명한 교체를 구현해 보겠습니다:

javascriptlet tds = document.querySelectorAll('#table td');

let color = 'color1';
for (let td of tds) {
  td.addEventListener('click', function() {
    if (color == 'color1') {
      color = 'color2'
    } else {
      color = 'color1'
    }
    
    this.classList.add(color);
  });
}

배열에서 여러 색상 교체하기

이제 두 가지 색상이 아닌, 임의의 수의 색상을 교체하고 싶다고 가정해 보겠습니다. 이를 위해 CSS 클래스 배열을 저장하겠습니다:

javascriptlet colors = ['color1', 'color2', 'color3'];

클래스의 색상을 작성해 보겠습니다:

css.color1 {
  background: red;
}
.color2 {
  background: green;
}
.color3 {
  background: yellow;
}

이제 교체를 구현해 보겠습니다:

javascriptlet tds = document.querySelectorAll('#table td');

let i = 0;
let colors = ['color1', 'color2', 'color3'];

for (let td of tds) {
  td.addEventListener('click', function() {
    this.classList.add(colors[i]);
    
    i++;
    if (i == colors.length) {
      i = 0;
    }
  });
}