同じ機能の複数のインスタンスが異なる値を扱う

Question

私は非常に基本的なjavascriptの知識について謝罪する必要があります。基本的には、最小/最大値が異なる3つの範囲スライダがあります。その値が良いか悪いかを示します。以下の3つの機能は、1つのスライダで個別に正常に動作しますが、どのようにそれらをまとめて組み合わせることができますか？

function checkValue() { 
var x = document.getElementById("one"); 
var y = document.getElementById("oneOutput"); 
if (x.value >= 25) { y.style.color = "orange"; } 
else if (x.value <= 8) { y.style.color = "red"; } 
else { y.style.color = "green"; } 
} 

function checkValue() { 
var x = document.getElementById("two"); 
var y = document.getElementById("twoOutput"); 
if (x.value >= 96) { y.style.color = "orange"; } 
else if (x.value <= 91) { y.style.color = "red"; } 
else { y.style.color = "green"; } 
} 

function checkValue() { 
var x = document.getElementById("three"); 
var y = document.getElementById("threeOutput"); 
if (x.value >= 39.0) { y.style.color = "orange"; } 
else if (x.value <= 34.9) { y.style.color = "red"; } 
else { y.style.color = "green"; } 
} 

多くのおかげで、

マルク・

Answer 1

あなたは、各スライダのための機能の別の名前を使用することができます。

だから、あなたのHTMLコード内でこのような程度になります。

<input id="one" type="range" oninput="checkValue1()" min=0 max=100 /><br> 
<span id="oneOutput">Result 1</span> 
<input id="two" type="range" oninput="checkValue2()" min=0 max=100 /><br> 
<span id="twoOutput">Result 2</span> 
<input id="three" type="range" oninput="checkValue3()" min=0 max=100 /><br> 
<span id="threeOutput">Result 3</span> 

その後、あなたは自分の関数の名前を変更する必要があります。

function checkValue1() { 
    var x = document.getElementById("one"); 
    var y = document.getElementById("oneOutput"); 
    if (x.value >= 25) { y.style.color = "orange"; } 
    else if (x.value <= 8) { y.style.color = "red"; } 
    else { y.style.color = "green"; } 
} 

function checkValue2() { 
    var x = document.getElementById("two"); 
    var y = document.getElementById("twoOutput"); 
    if (x.value >= 96) { y.style.color = "orange"; } 
    else if (x.value <= 91) { y.style.color = "red"; } 
    else { y.style.color = "green"; } 
} 

function checkValue3() { 
    var x = document.getElementById("three"); 
    var y = document.getElementById("threeOutput"); 
    if (x.value >= 39.0) { y.style.color = "orange"; } 
    else if (x.value <= 34.9) { y.style.color = "red"; } 
    else { y.style.color = "green"; } 
} 

---

この情報がお役に立てば幸い！

Answer 2

いくつかのパラメータを機能させるように宣言することで、コードをさらに乾燥させることができます。あなたがやりたいんどんなもの

function checkValue(id1, id2) { 
var x = document.getElementById(id1); 
var y = document.getElementById(id2); 
if (x.value >= 25) { y.style.color = "orange"; } 
else if (x.value <= 8) { y.style.color = "red"; } 
else { y.style.color = "green"; } 
} 

、その後

<input onchange="checkValue('one', 'oneOutput')" /> 
<input onchange="checkValue('two', 'oneOutput')" /> 
<input onchange="checkValue('three', 'oneOutput')" />