javascript - 使用 javascript 按下更改时执行某些操作

Question

我编写了一些代码来生成 RGB 颜色，但它在更改后可以工作，但我希望在更改时执行此操作:

<input type="range" id="myNumber" min="0" max="255" onchange="myFunction()" value="0" />
<input type="range" id="myNumber2" min="0" max="255" onchange="myFunction()" value="0" />
<input type="range" id="myNumber3" min="0" max="255" onchange="myFunction()" value="0" />
<p id="demo">Blalalalala</p>

<script>
function myFunction() {
    var x = document.getElementById("myNumber").value;
    var y = document.getElementById("myNumber2").value;
    var z = document.getElementById("myNumber3").value;  
    document.getElementById("demo").style.transition = 'background 0.5s ease 0s';
    document.getElementById("demo").style.background = 'rgb('+x+','+y+','+z+')';
}
</script>

更新!

随着答案，我添加了一个用于不透明度的内容，如果有人需要，这里是完整的代码

 <p>R (Stands for red):
    <input type="range" id="myNumber" min="0" max="255" step="1" oninput="myFunction()" value="0" /></p>
    <p>G (Stands for green):
    <input type="range" id="myNumber2" min="0" max="255" step="1" oninput="myFunction()" value="0" /></p>
    <p>B (Stands for blue):
    <input type="range" id="myNumber3" min="0" max="255" step="1" oninput="myFunction()" value="0" /></p>
    <p>A (Stands for opacity):
    <input type="range" id="myNumber4" min="0" max="1" step="0.1" oninput="myFunction()" value="1" /></p>




    <p id="demo">sasasasa</p>

    <script>
    document.getElementById("demo").style.background = 'rgb(0,0,0,1)';
    function myFunction() {
        var x = document.getElementById("myNumber").value;
        var y = document.getElementById("myNumber2").value;
        var z = document.getElementById("myNumber3").value; 
        var a = document.getElementById("myNumber4").value;     
        document.getElementById("demo").style.transition = 'background 0.5s ease 0s';
        document.getElementById("demo").style.background = 'rgba('+x+','+y+','+z+','+a+')';
    }
    </script>

Answer 1

使用 HTML5 input事件而不是 change事件。

<input type="range" id="myNumber" min="0" max="255" oninput="myFunction()" value="0" />
<input type="range" id="myNumber2" min="0" max="255" oninput="myFunction()" value="0" />
<input type="range" id="myNumber3" min="0" max="255" oninput="myFunction()" value="0" />




<p id="demo">Blalalalala</p>

<script>
  function myFunction() {
    var x = document.getElementById("myNumber").value;
    var y = document.getElementById("myNumber2").value;
    var z = document.getElementById("myNumber3").value;
    document.getElementById("demo").style.transition = 'background 0.5s ease 0s';
    document.getElementById("demo").style.background = 'rgb(' + x + ',' + y + ',' + z + ')';
  }
</script>

检查browser compatibility of input event .