2022. 7. 15. 17:40ㆍProgram/JavaScript
168_자바스크립트에서 슬러이더 값 변경 확인하기
[적용]
- 슬라이더 상태 변경 시 작업을 처리하고 싶을 때
[문법]
| 이벤트 | 의미 |
| input | input 요소 변경 시 이벤트 |
| change | input 요소 변경 시 이벤트 |
[내용]
폼 요소 값의 변경은 input, change 이벤트로 감시할 수 있다.
addEventListener()를 사용해 이벤트 핸들러를 설정한다.
input 이벤트는 슬라이더가 움직일 때마다 발생하지만, change 이벤트는 조작이 끝난 산태에서만 발생한다.
이벤트 핸들러 내부 함수는 앞서 기술한 슬라이더 값 읽어오기 방법을 사용한다.
https://stonefree.tistory.com/354
[JavaScript] 자바스크립트에서 슬라이더 값 읽어 오기
167_자바스크립트에서 슬라이더 값 읽어 오기 [적용] 슬라이더의 값을 확인하고 싶을 때 슬라이더의 값을 변경하고 싶을 때 [문법] 속성 의미 타입 input요소.value 슬라이더의 현재 값 문자열 * input
stonefree.tistory.com
HTML index.html
<body>
<input type="range" id="myRange" min="0" max="100" value="50" />
<p class="log"></p>
</body>JavaScript main.js
// input 요소 참조
const element = document.querySelector('#myRange');
// 변경 이벤트 감시
element.addEventListener('input', handleChange);
function handleChange(event) {
// 현재 값 가져오기
const value = event.target.value;
// 화면에 표시
document.querySelector('.log').innerHTML = `현재 값은 ${value} 입니다.`;
}
실행결과
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트에서 색상 선택 정보변경 확인하기 (0) | 2022.07.15 |
|---|---|
| [JavaScript] 자바스크립트에서 색상 선택 정보 읽어오기 (0) | 2022.07.15 |
| [JavaScript] 자바스크립트에서 슬라이더 값 읽어 오기 (0) | 2022.07.15 |
| [JavaScript] 자바스크립트에서 드롭다운 메뉴값 변경 확인하기 (1) | 2022.07.15 |
| [JavaScript] 자바스크립트에서 드롭다운(Drop-down) 메뉴값 읽어오기 (0) | 2022.07.15 |