最初の入力が変更されるまでRGB値が変更されない

Question

私はユーザのbackgroundの要素の色を変更することができる私のウェブページ上の非常に簡単なスクリプトを持っています。 rgbスライダー値に基づいています。

しかし、要素backgroundrgb()を更新するには、inputのスライダの値を変更する必要があります。

スクリプトが動作するようにを想定しある方法は、スライダーの値のいずれかが変更された場合、backgroundrgb()値は、それに伴って変更されています。

これは私のJavaScriptのです：

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>