Javascript 根据输入值更改div元素（框）的颜色

我需要把3个盒子放在一起。根据输入值，需要更改框的颜色。例如：如果数字在（1-3）范围内，则第一个框应显示红色，而所有其他框应为灰色；同样，如果数字在（4-6）范围内，则第二个框应为黄色，而第一个和第三个框应为灰色；如果数字在（7-9）范围内，则第三个框应为绿色

这个想法基本上是为了显示评级。所以红色（1-3）、黄色（4-6）和绿色（7-9）。所以，若创新评级包含值2，则第一个框应为红色

我试过以下方法：

var num=4；
var strColorPairs=数组({
“位置”：0，
“颜色”：“红色”
}, {
“位置”：1，
“颜色”：“黄色”
}, {
"位置":2,，
“颜色”：“绿色”
});
var位置=检查位置（num）；
色盒（位置）；
功能色盒（位置）{
var divList=document.getElementsByClassName（'ratingBox'）；
变量i，n=divList.length；
对于（i=0；i=min&&num
var num=1；
var strColorPairs=数组(
{'position'：0，'color'：'red'}，
{'position'：1，'color'：'yellow'}，
{'position'：2，'color'：'green'}
);
var位置=检查位置（num）；
色盒（位置）；
功能色盒（位置）
{
var divList=document.getElementsByClassName（'ratingBox'）；
变量i，n=divList.length；
curContent=divList[position].id；
console.log（curContent）；
对于（i=0；i请添加此示例不完整，例如，您正在尝试访问分级框的子级，而该示例没有。strColorPairs=Array（）但是，然后将键/值对放入其中。因此长度将为0。您希望得到什么输出？取而代之的是什么输出？
但我缺少正确的逻辑
正确的逻辑是什么？为什么您现有的逻辑错误？还有
divList[I]。子项[0]
将返回
未定义的
。当然，它只有3个对象……我必须读得更好。。。。zzzz@user596502检查错误是的，我在divList中获取id时犯了一些错误，并且在curContent中也犯了一些错误。谢谢！@Durga有没有其他更好的方法来达到同样的结果，或者你对重构f此代码。@user596502检查此代码