I wrote an if statement that says if the number is < 50 the background color is red. If the number is 51-74 it is orange and if it is 75 or up it's green. But the colors aren't changing based on the value and I'm not sure why. 
Here's the site in action: <http://www.andrewhnovak.com/test/index.html>
Here's the code
HTML

```
 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>Site Demo</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="css/header.css" rel="stylesheet" type="text/css">
    <link href="css/mainPage.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="container">
        <div class="row">

        </div>
    </div><!--
</div>

</div>

</div>
-->

    <div class="container">
        <div class='underHeader'></div>
    </div>

    <div class="container">
        <div class='whiteBox'>
            <div class='newProducts'></div>
            <div id="frontPage">
        <table class="table table-bordered" id="tablehere">
    <thead>

        <tr>

        </tr>
        <tr>
          <th data-field="id">item<div id="Row1Rating">62</div></th>

        </tr>
         <tr>
          <th data-field="id">item<div id="Row2Rating">55</div></th>

        </tr>
         <tr>
          <th data-field="id">item<div id="Row3Rating">77</div></th>

        </tr>
         <tr>
          <th data-field="id">item<div id="Row4Rating">66</div></th>

        </tr>
         <tr>
          <th data-field="id">item<div id="Row5Rating">88</div></th>

        </tr>
         <tr>
          <th data-field="id">item<div id="Row6Rating">22</div></th>

        </tr>
         <tr>
          <th data-field="id">item<div id="Row7Rating">22</div></th>

        </tr>
         <tr>
          <th data-field="id">item<div id="Row8Rating">22</div></th>

        </tr>
         <tr>
          <th data-field="id">item<div id="Row9Rating">22</div></th>

        </tr>
         <tr>
          <th data-field="id">item<div id="Row10Rating">22</div></th>

        </tr>
   <tr>
      <div id="link"><a href="#">Test showing app.js is connected</a></div>

        </tr>

    </thead>

</table>
    </div>
</div>

    </div>

      <footer></footer>

    <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script> <!--<script src="js/jquery.easing-1.3.js"></script>-->
    <script src="js/bootstrap.js"></script> <script src="js/menu.js"></script>
     <script src="js/app.js" type="text/javascript"></script>

</body>
</html>

```

JS

```
   $(document).ready(function () { 

    $('#link').click(function(e) {
    e.preventDefault();// prevent the default anchor functionality
    $('#frontPage').hide();

frontPageRatings();

});

function frontPageRatings(){

    var rowValue1 = document.getElementByID("Row1Rating");
    var Value1 = parseInt(rowValue1.innerHTML);

    var rowValue2 = document.getElementByID("Row2Rating");
    var Value2 = parseInt(rowValue2.innerHTML);

    var rowValue3= document.getElementByID("Row3Rating");
    var Value3 = parseInt(rowValue3.innerHTML);

    var rowValue4 = document.getElementByID("Row4Rating");
    var Value4 = parseInt(rowValue4.innerHTML);

    var rowValue5 = document.getElementByID("Row5Rating");
    var Value5 = parseInt(rowValue5.innerHTML);

    var rowValue6 = document.getElementByID("Row6Rating");
    var Value6 = parseInt(rowValue6.innerHTML);

    var rowValue7 = document.getElementByID("Row7Rating");
    var Value7 = parseInt(rowValue7.innerHTML);

    var rowValue8 = document.getElementByID("Row8Rating");
    var Value8 = parseInt(rowValue7.innerHTML);

    var rowValue9 = document.getElementByID("Row9Rating");
    var Value9 = parseInt(rowValue7.innerHTML);

    var rowValue10 = document.getElementByID("Row10Rating");
    var Value10 = parseInt(rowValue7.innerHTML);

    if(Value1<50){
        rowValue1.style.backgroundColor = '#900000';
        }
        else if(Value1 >49 && Value1 <75){
        rowValue1.style.backgroundColor = '#FF9933';
        }
        else if(Value1>74){
        rowValue1.style.backgroundColor = '#00CC00';
        }

            if(Value2<50){
        rowValue2.style.backgroundColor = '#900000';
        }
        else if(Value2 >49 && Value2 <75){
        rowValue2.style.backgroundColor = '#FF9933';
        }
        else if(Value2>74){
        rowValue2.style.backgroundColor = '#00CC00';
        }

            if(Value3<50){
        rowValue3.style.backgroundColor = '#900000';
        }
        else if(Value3 >49 && Value3 <75){
        rowValue3.style.backgroundColor = '#FF9933';
        }
        else if(Value3>74){
        rowValue3.style.backgroundColor = '#00CC00';
        }

            if(Value4<50){
        rowValue4.style.backgroundColor = '#900000';
        }
        else if(Value4 >49 && Value4 <75){
        rowValue4.style.backgroundColor = '#FF9933';
        }
        else if(Value4>74){
        rowValue4.style.backgroundColor = '#00CC00';
        }

            if(Value5<50){
        rowValue5.style.backgroundColor = '#900000';
        }
        else if(Value5 >49 && Value5 <75){
        rowValue5.style.backgroundColor = '#FF9933';
        }
        else if(Value5>74){
        rowValue5.style.backgroundColor = '#00CC00';
        }

            if(Value6<50){
        rowValue6.style.backgroundColor = '#900000';
        }
        else if(Value6 >49 && Value6 <75){
        rowValue6.style.backgroundColor = '#FF9933';
        }
        else if(Value6>74){
        rowValue6.style.backgroundColor = '#00CC00';
        }

            if(Value7<50){
        rowValue7.style.backgroundColor = '#900000';
        }
        else if(Value7 >49 && Value7 <75){
        rowValue7.style.backgroundColor = '#FF9933';
        }
        else if(Value7>74){
        rowValue7.style.backgroundColor = '#00CC00';
        }

    }

});

```