첫 번째 입력이 변경 될 때까지 RGB 값이 변경되지 않습니다.

Question

사용자가 내 웹 페이지에서 매우 간단한 스크립트를 사용하여 사용자가 요소의 색을 background 변경할 수 있습니다. rgb 슬라이더 값을 기반으로합니다.

그러나 요소 backgroundrgb()을 업데이트하려면 최상위 input 슬라이더 값을 변경해야합니다.

스크립트가 작동을 가정 인 방법은, 슬라이더 값 중 하나가 변경 될 때 backgroundrgb() 값이 함께 변경된다.

var input = document.querySelector("input"); 

input.addEventListener("input", function(){ 

    var red = document.getElementById("red").value, 
     green = document.getElementById("green").value, 
     blue = document.getElementById("blue").value; 

    var display = document.getElementById("display"); 

    display.style.background = "rgb(" + red + ", " + green + ", " + blue + ")"; 

}); 

그리고 내 HTML :

<div class="picker"> 
    Red <input type="range" min="0" max="255", step="1" id="red"> 
    Green <input type="range" min="0" max="255", step="1" id="green"> 
    Blue <input type="range" min="0" max="255", step="1" id="blue"> 

    <div id="display"></div> 
</div> 

이 document.querySelector("input") 함께 할 수있는 뭔가가있을 수 있습니다처럼 그러나, 느낌, 내가 같은 확실하지 오전

이

내 자바 스크립트입니다 귀여운 순수한 JavaScript에 새롭다.

감사합니다.

Answer 1

document.querySelector()은 단일 요소를 반환하므로 첫 번째 입력에 사용됩니다.

document.querySelectorAll()을 사용하면 요소 목록을 반환해야합니다. 개별 요소와 이벤트 처리기를 바인딩하려면 반복해야합니다.

var input = document.querySelectorAll("input"); 
 
for (var i = 0; i < input.length; i++) { 
 
    input[i].addEventListener("input", function() { 
 
     var red = document.getElementById("red").value, 
 
      green = document.getElementById("green").value, 
 
      blue = document.getElementById("blue").value; 
 

 
     var display = document.getElementById("display"); 
 
     display.style.background = "rgb(" + red + ", " + green + ", " + blue + ")"; 
 
    }); 
 
}

<div class="picker"> 
 
    Red 
 
    <input type="range" min="0" max="255" , step="1" id="red"> 
 
    Green 
 
    <input type="range" min="0" max="255" , step="1" id="green"> 
 
    Blue 
 
    <input type="range" min="0" max="255" , step="1" id="blue"> 
 
    <div id="display">Yahooooooooooooo</div> 
 
</div>