JavaScript에서 색상 선택 입력(input type=color)의 onchange 이벤트가 동작하지 않을 때 해결 방법

onchange 이벤트란?

onchange 이벤트는 HTML 요소의 값이 변경되는 순간 자동으로 실행되는 이벤트입니다. 색상 선택(input type="color") 입력 요소에서도 이 이벤트를 활용하면, 사용자가 선택한 색상 값을 즉시 JavaScript 함수로 전달할 수 있습니다.

정상적으로 동작하게 하려면 아래와 같은 문법을 사용해야 합니다.

onchange="yourFunctionName(this);"

여기서 this는 이벤트가 발생한 요소 자신을 가리키며, 함수 내부에서 c.value 형태로 해당 요소의 값을 손쉽게 가져올 수 있습니다.

전체 예제 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p>
<label for="color">Choose Color</label> <input type="color" id="selectedColor"
value="#985d5d" onchange="showValue(this);" />
</p>
<script>
   function showValue(c){
      console.log(c.value);
   }
</script>
</body>
</html>

코드 핵심 포인트

색상 입력 요소에 onchange="showValue(this);"를 직접 연결합니다.
showValue 함수는 매개변수 c로 요소를 받아 c.value, 즉 선택된 색상 코드(HEX 값)를 console.log로 출력합니다.

프로그램 실행 방법

위 코드를 실행하려면 파일 이름을 anyName.html(index.html)로 저장한 후, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 Open with Live Server(라이브 서버로 열기) 옵션을 선택하면 됩니다.

실행 결과

JavaScript에서 색상 선택 입력(input type=color)의 onchange 이벤트가 동작하지 않을 때 해결 방법

브라우저에서 색상 입력 요소를 클릭해 원하는 색상을 선택하면, 개발자 도구 콘솔(Console)에 다음과 같이 선택한 색상 값이 출력되는 것을 확인할 수 있습니다.

JavaScript에서 색상 선택 입력(input type=color)의 onchange 이벤트가 동작하지 않을 때 해결 방법

이처럼 onchange 이벤트에 함수를 올바르게 연결하기만 하면, 색상 유형 입력에서도 값 변경을 문제없이 감지하고 처리할 수 있습니다.