一緒に2つの範囲を変更する - javascript

Question

私は3つの範囲を持っています。1つの範囲の変更幅2番目の範囲の変更の高さ..私は3番目の範囲の変更の幅と高さを同じ値（サイズを変更）で欲しいです。

function x11() { 
 
    var x1 = document.getElementById("m1").value; 
 
    var mm = document.getElementById("mm").style; 
 
    mm.width = x1 + "px"; 
 
} 
 

 
function x22() { 
 
    var x1 = document.getElementById("m2").value; 
 
    var mm = document.getElementById("mm").style; 
 
    mm.height = x1 + "px"; 
 
}

1<input type="range" min="0" max="200" value="100" style="width:100%;" oninput="x11(this.value)" id="m1"> 
 
    
 
2<input type="range" min="0" max="200" value="40" step="0.5" style="width:100%;" oninput="x22(this.value)" id="m2"> 
 
    3 
 
<input type="range" style="width:100%;" id="m3"> 
 

 
<p id="mm" style="width: 150px; height:40px; background-color:red;"></p>

Answer 1

場合は、どこかにその値を保存する必要があります。そうすれば、あなたは仕事の参考となるポイントが得られます。そして、それらの参照点を追加するだけです。

var width = 100; 
 
var height = 40; 
 
var extra = 0; 
 

 
// Actually use the passed in value 
 
function x11(x1) { 
 
    var mm = document.getElementById("mm").style; 
 
    width = Number(x1); 
 
    mm.width = (width + extra) + "px"; 
 
} 
 

 
function x22(x1) { 
 
    var mm = document.getElementById("mm").style; 
 
    height = Number(x1); 
 
    mm.height = (height + extra) + "px"; 
 
} 
 

 
function x33(x1) { 
 
    // Change the size proportionally 
 
    var mm = document.getElementById("mm").style; 
 
    extra = Number(x1); 
 
    mm.width = (width + extra) + 'px'; 
 
    mm.height = (height + extra) + 'px'; 
 
}

1<input type="range" min="0" max="200" value="100" style="width:100%;" oninput="x11(this.value)" id="m1"> 
 
    
 
2<input type="range" min="0" max="200" value="40" step="0.5" style="width:100%;" oninput="x22(this.value)" id="m2"> 
 
    3 
 
<input type="range" style="width:100%;" oninput="x33(this.value)" min="0" max="200" value="0" id="m3"> 
 

 
<p id="mm" style="width: 100px; height:40px; background-color:red;"></p>

上記動作しますが、個人的に、私は少しそれをクリーンアップすると思います。

var width = 100; 
 
var height = 40; 
 
var margin = 0; 
 

 
function setWidth(w) { 
 
    width = Number(w); 
 
    drawBox(); 
 
} 
 

 
function setHeight(h) { 
 
    height = Number(h); 
 
    drawBox(); 
 
} 
 

 
function setMargin(m) { 
 
    margin = Number(m); 
 
    drawBox(); 
 
} 
 

 
// Move box drawing to one function 
 
function drawBox() { 
 
    var box = document.getElementById('box').style; 
 
    box.width = (width + margin) + 'px'; 
 
    box.height = (height + margin) + 'px'; 
 
} 
 

 
// Avoid having to set the initial size in CSS 
 
drawBox();

/* Separate CSS from HTML */ 
 
input { 
 
    width: 100%; 
 
} 
 

 
p { 
 
    background-color: red; 
 
}

<!-- We don't need the IDs since we're getting the value directly --> 
 
<!-- We're also going to use more descriptive function names --> 
 
1 <input type="range" min="0" max="200" value="100" oninput="setWidth(this.value)"> 
 
    
 
2 <input type="range" min="0" max="200" value="40" step="0.5" oninput="setHeight(this.value)"> 
 
    
 
3 <input type="range" min="0" max="200" value="0" oninput="setMargin(this.value)"> 
 

 
<p id="box"></p>

Answer 2

私は右のあなたを理解していれば、あなたは要素をスケールする：あなたが比例幅と高さを変更したい

function scale(value){ 
mm=document.getElementById("mm"); 
mm.width=mm.width*value+"px"; 
mm.height=mm.height*value+"px"; 
} 

<input oninput="scale(this.value)">