入力値に基づいてdiv要素（ボックス）の色を変更します

Question

3つのボックスを並べて表示する必要があります。入力値に基づいて、ボックスの色を変更する必要があります。たとえば、数字が（1-3）&の範囲にある場合、最初のボックスは赤色で表示されます。他のすべてのボックスはグレーでなければなりません。同様に数字が（4-6）の範囲内にある場合、第2のボックスは黄色でなければならず、第1および第3のボックスはグレーでなければならない。数字が（7-9）の範囲にある場合、3番目のボックスは緑色になります。

アイデアは基本的に評価を表示することです。赤（1-3）、黄色（4-6）、緑色（7-9）です。したがって、イノベーションの評価に値2が含まれる場合、最初のボックスは赤色になります。

は、私は、次の方法で試してみました：

var num = 4; 
 
var strColorPairs = Array({ 
 
    'position': 0, 
 
    'color': 'red' 
 
}, { 
 
    'position': 1, 
 
    'color': 'yellow' 
 
}, { 
 
    'position': 2, 
 
    'color': 'green' 
 
}); 
 

 
var position = checkPosition(num); 
 

 

 
colorBox(position); 
 

 
function colorBox(position) { 
 
    var divList = document.getElementsByClassName('ratingBox'); 
 
    var i, n = divList.length; 
 
    for (i = 0; i < n; i++) { 
 
    curContent = divList[i].children[0].id; 
 
    for (j = 0; j < strColorPairs.length; j++) { 
 
     if (strColorPairs[j].position == curContent) 
 
     divList[i].style.backgroundColor = strColorPairs[j].color; 
 
    } 
 
    } 
 
} 
 

 
function checkPosition(num) { 
 
    var position; 
 
    if (isInRange(num, 1, 3)) { 
 
    position = 0; 
 
    } else if (isInRange(num, 4, 6)) { 
 
    position = 1; 
 
    } else if (isInRange(num, 7, 9)) { 
 
    position = 2; 
 
    } 
 
    return position; 
 
} 
 

 
function isInRange(num, min, max) { 
 
    return num >= min && num <= max; 
 
}

Rating for innovation 
 
<div id="0" class="ratingBox"></div> 
 
<div id="1" class="ratingBox"></div> 
 
<div id="2" class="ratingBox"></div>

しかし、私はここで右のロジックをしないのです。あなたは正しい方法でそれをやる方法を教えてください。

Answer 1

var num =1; 
 
var strColorPairs = Array(
 
          {'position' : 0, 'color' : 'red'}, 
 
          {'position' : 1, 'color' : 'yellow'}, 
 
          {'position' : 2, 'color' : 'green'} 
 
         ); 
 

 
var position = checkPosition(num); 
 

 

 
colorBox(position); 
 
function colorBox(position) 
 
    { 
 
     var divList = document.getElementsByClassName('ratingBox'); 
 
     var i, n = divList.length; 
 
     curContent = divList[position].id; 
 
     console.log(curContent); 
 
     for (i=0; i<n; i++) 
 
     { 
 
      
 
      for (j=0; j<strColorPairs.length; j++) 
 
      { 
 
       if (strColorPairs[j].position == curContent){ 
 
        divList[curContent].style.backgroundColor = strColorPairs[j].color; 
 
        } 
 
       else {divList[i].style.backgroundColor = 'gray'} 
 
      } 
 
     } 
 
    } 
 

 
function checkPosition(num){ 
 
var position; 
 
    if(isInRange(num,1,3)) 
 
    { 
 
     position=0; 
 
    } 
 
    else if(isInRange(num,4,6)) 
 
    { 
 
     position=1; 
 
    } 
 
    else if(isInRange(num,7,9)) 
 
    { 
 
     position=2; 
 
    } 
 
    return position; 
 
} 
 

 
function isInRange(num,min,max){ 
 
    return num >= min && num <= max; 
 
}

.ratingBox{ 
 
width:50px;height:50px;}

Rating for innovation 
 
    <div id="0" class="ratingBox"></div> 
 
    <div id="1" class="ratingBox"></div> 
 
    <div id="2" class="ratingBox"></div> 
 

この例では、例えば、完全なものではありません[MCVE]あなたはレーティング・ボックスと例の子にアクセスしようとしている追加してください