javascript - 如何根据输入的值更改输入的背景颜色

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 的元素 - 所以您应该确保解决这个问题。类可以重用。详细了解 ID 和类别之间的差异 at CSS-Tricks .

其次，这可以在不考虑元素的 ID/类/等的情况下完成。只需将 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);">