輸入答案后如何在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>