输入答案后如何在javascript中更改用户输入颜色

Question

我正在尝试根据用户输入的一系列数字来更改用户输入的颜色。 （即超过 100 是红色，75 到 100 是黄色，50 到 75 是黑色，25 到 50 是黄色，任何更少的是红色）

这是我迄今为止尝试过的代码片段...

 function colorChange() { var patientROM = document.getElementById("flexion"); if (patientROM > 100) { patientROM.style.color = "#FF0000"; } else if (patientROM <= 100 && patientROM > 75) { PatientROM.style.color = "#FFFF00"; } else if (patientROM <= 75 && patientROM > 50) { patientROM.style.color = "#330000"; } else if (patientROM <= 50 && patientROM > 25) { patientROM.style.color = "#FFFF00"; } else if (patientROM <= 25) { patientROM.style.color = "#FF0000"; } else { alert("Invalid Input, please try again"); } }

 <input type="text" class="celltext" id="flexion" onkeyup="colorChange()" />

当我输入我的输入时，它会直接进入警报（“无效输入，请再试一次”）；

有没有办法用 onchange 元素来做到这一点？ 我已经尝试过 onkeyup 和 onchange

Answer 1

您可以将输入传递到函数调用中，而不是使用文档按 id 查找

 function colorChange(el) { const value = parseInt(el.value); console.log(value) if (value > 100) { el.style.color="#FF0000"; } else if (value > 75) { el.style.color="#00FF00"; } else if (value > 50) { el.style.color="#0000FF"; } else if (value > 25) { el.style.color="#ffff00"; } else if (value >= 0) { el.style.color="#00ffff"; } else { console.log("Invalid Input, please try again"); } }

 <input type="text" class="celltext" id="flexion" onKeyUp="colorChange(this)"/>

Answer 2

您需要检查输入框的值，而不是输入框本身，以便运算符进行比较。

 window.colorChange = function() { var inputBox = document.getElementById("flexion"); var patientROM = inputBox.value; if (patientROM > 100) { inputBox.style.color="#FF0000"; } else if (patientROM <= 100 && patientROM > 75) { inputBox.style.color="#FFFF00"; } else if (patientROM <= 75 && patientROM > 50) { inputBox.style.color="#330000"; } else if (patientROM <= 50 && patientROM > 25) { inputBox.style.color="#FFFF00"; } else if (patientROM <= 25) { inputBox.style.color="#FF0000"; } else { alert("Invalid Input, please try again"); } }

 <input type="text" class="celltext" id="flexion" onkeyup="colorChange()"/>

---

jsFiddle： http : //jsfiddle.net/cq7n6p1g/

Answer 3

像这样

 const flexion = document.getElementById('flexion'); const colorChange = (ev) => { let n = Number.parseInt(ev.target.value,10); let c; if (Number.isNaN(n)) { c = 'NaN'; } else if (n > 100) { c = 'over100'; } else if (n > 75) { c = 'over75'; } else if (n > 50) { c = 'over50'; } else if (n > 25) { c = 'over25'; } else { c = 'under25'; } flexion.setAttribute('class',c); console.log(n,c); }; document.addEventListener('input',colorChange);

 .over100 { color: #F00; } .over75 { color: #FF0; } .over50 { color: #300; } .over25 { color: #FF0; } .under25 { color: #F00; } .NaN { color: silver; }

 <form> <label for="flexion">Flexion</label> <input type="number" class="celltext" id="flexion" /> </form>