(DOM)click이벤트로 HTML요소 텍스트와 CSS스타일 변경하기

 

const radioRow = document.querySelector('#cheat0-option1');
const radioRowReverse = document.querySelector('#cheat0-option2');
const radioColumn = document.querySelector('#cheat0-option3');
const radioColumReverse = document.querySelector('#cheat0-option4');

const flexDirection = document.querySelector('.day');
const dayBox = document.querySelector('.cheat0');


radioRow.addEventListener('click', function () {
  flexDirection.textContent = 'flex-direction: row;';
  dayBox.style.flexDirection = 'row';
});

radioRowReverse.addEventListener('click', function () {
  flexDirection.textContent = 'flex-direction: row-reverse;';
  dayBox.style.flexDirection = 'row-reverse';
});

radioColumn.addEventListener('click', function () {
  flexDirection.textContent = 'flex-direction: column;';
  dayBox.style.flexDirection = 'column';
});

radioColumReverse.addEventListener('click', function () {
  flexDirection.textContent = 'flex-direction: column-reverse;';
  dayBox.style.flexDirection = 'column-reverse';
});

일단 구현을 했는데, 반복된 동작을 처리하는 일이니 for each문을 사용해서 코드를 더 효율적으로 만들 수 있을 것 같다.

다시한번 해봐야겠다.