Question

我有一张表格。在表单中我有数字输入字段。最小数量是1，最大数量是5.到目前为止一切都很好。根据风险评估，使用数量（1-5之间）。 1风险低，5风险高。如果用户输入1我想要输入字段所在的单元格变为绿色。如果他们输入5，我希望它变成红色。当表格首次出现时，颜色可以从绿色开始（虽然我很高兴在首次填充字段之前它没有颜色）数字1和2都是绿色。 3变为黄色4变为橙色，然后变为5变为红色。听起来很简单，但我有点失落。有人可以抓住我的手并引导我完成它。我研究了它，但我没有找到任何让我更接近的东西。

Answer 1

抓住表格。

var form = document.querySelector('#form');

我们将使用事件委托 - 将事件侦听器附加到父元素以捕获从其子元素冒泡的事件，而不是附加到每个输入元素。在输入中按下某个键时，请拨打changeColor。

form.addEventListener('keyup', changeColor, false);

颜色数组。

var colors = ['green', 'green', 'orange', 'orange', 'red'];

e.target是导致事件触发的元素。将其背景颜色设置为数组中的相应颜色。

function changeColor(e) {
  var input = e.target;
  input.style.backgroundColor = colors[input.value - 1];
}

DEMO

根据输入字段

1 个答案: