Question

我必须为我对javascript的基本知识道歉，基本上，我有三个具有不同最小/最大值的范围滑块，我想更改输出的文本颜色以显示该值是好还是坏。以下三个功能可以单独使用一个滑块，但如何将它们组合在一起呢？

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')" />

具有相同功能但处理不同值的多个实例

2 个答案: