how to use onmousedown and onchange together
Question
I have a div and three slide-bars ie input type=range. When the slide-bars are dragged accordingly the background-color of the div is changed. I have used 'onchange' event to call a function with 2 parameters this.value and a number; that sets the background-color of the div The three slide-bars are representing 'rgb' values with a range of 0-255. So far this is working.
But the way i want it to work is not what is happening right now. When the slide-bar is dragged the color is not changing instead it changes when 'onmouseup' action occurs. I want the color to change when the slide-bar is being dragged. Here is my code:
<html>
<head>
<script>
var r=0;
var g=0;
var b=0;
function set(){
r=g=b=128;
document.getElementById('div').style.backgroundColor="rgb("+r+","+g+","+b+")";
}
function change(val,bar){
if (bar==1){
r=val;
}
if (bar==2){
g=val;
}
if (bar==3){
b=val;
}
document.getElementById('div').style.backgroundColor="rgb("+r+","+g+","+b+")";
}
</script>
</head>
<body onload="set()">
<div id="div" style="width:400px;height:100px;">
</div>
<table border="">
<tr><td>red</td><td><input id="r_slide" type="range" style="width:200px" min="0" max="255" onchange="change(this.value,1)"></td></tr>
<tr><td>blue</td><td><input id="g_slide" type="range" style="width:200px" min="0" max="255" onchange="change(this.value,2)"></td></tr>
<tr><td>green</td><td><input id="b_slide" type="range" style="width:200px" min="0" max="255" onchange="change(this.value,3)"></td></tr>
</table>
</body>
</html>
3 answers
solution1
3 2016-04-29 10:15:45
You can use onInput to get the changes live. Note that onInput isn't supported in some versions of IE, so I left onChange in there as a fallback to cover all of your bases.
var r=0; var g=0; var b=0; function set() { r=g=b=128; var div = document.getElementById('div'); div.style.backgroundColor="rgb("+r+","+g+","+b+")"; } function change(val,bar){ if (bar==1){ r=val; } if (bar==2){ g=val; } if (bar==3){ b=val; } var div = document.getElementById('div'); div.style.backgroundColor="rgb("+r+","+g+","+b+")"; }
<html> <head> </head> <body onload="set()"> <div id="div" style="width:400px;height:100px;"></div> <table border=""> <tr> <td>red</td> <td> <input id="r_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,1)" onchange="change(this.value,1)"> </td> </tr> <tr> <td>blue</td> <td> <input id="g_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,2)" onchange="change(this.value,2)"> </td> </tr> <tr> <td>green</td> <td> <input id="b_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,3)" onchange="change(this.value,3)"> </td> </tr> </table> </body> </html>
solution2
1 2016-04-29 10:12:21
You can use the input event handler for this. For example:
<input type="range" oninput="change(this.value,x)">
solution3
0 2016-04-29 10:15:45
Instead of the onChange , which triggers after the change happened, you can use the onInput event. ( more info ).
Important to note is that onInput (just as input:type=range ) is not available on IE8 and below, nor on Opera 9 and below.
<table border="">
<tr><td>red</td><td><input id="r_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,1)"></td></tr>
<tr><td>blue</td><td><input id="g_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,2)"></td></tr>
<tr><td>green</td><td><input id="b_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,3)"></td></tr>
</table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.