[책] 자바스크립트 코드 레시피 278 - 157일차

색상 선택 정보 변경 확인하기

• 컬러 피커 상태 변경 시 작업을 처리하고 싶을 때

구문

change input 요소 변경 시 이벤트

설명

컬러 피커 요소의 상태 변경은 change 이벤트로 감시할 수 있습니다. addEventListener()를 사용해 이벤트 핸들러를 설정합니다. 이벤트 핸들러 내부 함수는 앞서 기술한 색상 선택 정보 읽어 오기 방법을 사용합니다.

실습

index.html

<input type="color" id="myColor">
<p class="log"></p>

---

script.js

const cbA = document.querySelector('#myColor');
cbA.addEventListener('change', (event) => {
  const value = event.target.value;
  const log = `${value} 색상이 선택되었습니다.`;
  const logEl = document.querySelector('.log');
  logEl.innerHTML = log;
  logEl.style.backgroundColor = value;
});