如何根據輸入的值更改輸入的背景色

Question

我正在嘗試根據輸入的值更改輸入字段的背景色。 我有一些JS詳細說明了大於/小於條件的情況。

問題 -它僅在第一個單元中起作用，而並非在所有其余單元中起作用。 如何使腳本通過其他輸入值？

HTML片段：

<div class="row">
    <div class="col-lg-3 text-center">
        <label for="k-cls" class="text-strong">CLS</label>
        <input class="form-control" type="text" id="k-cls" placeholder="#" onchange="checkFilled();">
    </div>
</div>

這是JS代碼段：

function checkFilled() {
    var inputVal = document.getElementById("k-cls");
    if (inputVal.value >= 6 && inputVal.value <= 9) {
        inputVal.style.backgroundColor = "yellow";
    }
    else{
        inputVal.style.backgroundColor = "";
    }
}        
checkFilled();

這是當前工作的Codepen 。

Answer 1

首先，一個頁面上不能有多個具有相同ID的元素-因此，您應確保對其進行修復。 類可以重用。 在CSS-Tricks上了解有關ID和類之間的區別的更多信息。

其次，這可以與元素的ID / class / etc無關地實現。 只需將onchange事件的引用傳遞給函數即可，如下所示。

（我也將onchange換成了onkeyup因此您可以看到該函數立即運行。）

編輯：根據下面評論中的討論，其他功能已添加到此演示中。

 function checkFilled(event) { var inputVal = event.target; var inputData = JSON.parse(inputVal.dataset.ranges); var color = ""; for (i = 0; i < inputData.length; i++) { if (inputVal.value >= inputData[i][0] && inputVal.value <= inputData[i][1]) { color = inputData[i][2]; break; } } inputVal.style.backgroundColor = color; } 

 <input placeholder="#" data-ranges='[[1, 3, "yellow"], [4, 6, "blue"], [7, 9, "red"]]' onkeyup="checkFilled(event);">