input 요소의 range 타입의 값을 다른 요소에 표시하는 샘플 코드
개요
<input> 요소의 range 유형 값을 다른 요소에 표시하는 샘플 코드 
코드
<!DOCTYPE html>
<html lang="ja">
<head>
<script type="text/javascript">
window.onload = () => {
// (1)イベントを設定
for (var element of document.getElementsByClassName('range')) {
element.addEventListener('input', (event) => {
// (2)ソース要素のvalueを次（隣）の要素のinnerHTMLへセット
event.srcElement.nextElementSibling.innerHTML = event.srcElement.value;
});
}
// (3)初期表示するためにイベントを起こす
for (var element of document.getElementsByClassName('range')) {
element.dispatchEvent(new Event('input'));
}
}
</script>
</head>
<body>
<div>
<label>range A</label>
<input type="range" class="range" value="50"><span></span>
</div>
<div>
<label>range B</label>
<input type="range" class="range" value="50"><span></span>
</div>
</body>
</html>
설명
html부
<!DOCTYPE html>
<html lang="ja">
<head>
<script type="text/javascript">
window.onload = () => {
// (1)イベントを設定
for (var element of document.getElementsByClassName('range')) {
element.addEventListener('input', (event) => {
// (2)ソース要素のvalueを次（隣）の要素のinnerHTMLへセット
event.srcElement.nextElementSibling.innerHTML = event.srcElement.value;
});
}
// (3)初期表示するためにイベントを起こす
for (var element of document.getElementsByClassName('range')) {
element.dispatchEvent(new Event('input'));
}
}
</script>
</head>
<body>
<div>
<label>range A</label>
<input type="range" class="range" value="50"><span></span>
</div>
<div>
<label>range B</label>
<input type="range" class="range" value="50"><span></span>
</div>
</body>
</html>
html부
script부
(1) 이벤트 설정
input 이벤트 리스너를 설정합니다 (2) 값 표시
<input type='range' class='range'>입니다 (3) 초기 표시
input 이벤트가 발생했습니다.링크
Reference
이 문제에 관하여(input 요소의 range 타입의 값을 다른 요소에 표시하는 샘플 코드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/shinsaka/items/7a6b527bb2093929bb77텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
