javascript code insight header in mvc3

Question

Hey friends any one please help me for this issue.in this javascript code i m getting 2 arrays IDs array and percentage array from controller and convert them into javascript array now i wana dynamically changing css property of an element but i need succeed.If anyone find error in this code please tell me

@section javascript{
        <script  type="text/javascript">
         $(document).ready(function() {
                @{
                    string data = "";
                    int length = ViewBag.length;
            }

              var percent = new Array();
            @for (int j = 0; j < length; j++)
            {
                data += "percent[" + j + "]=\"" + ViewBag.percentage[j] + "\";";
            }         
             @MvcHtmlString.Create(data);  
              var ids = new Array();
            @for (int i = 0; i < length; i++)
            {   
                data += "ids[" + i + "]=\"" + ViewBag.IDs[i] + "\";";
            }   
              @MvcHtmlString.Create(data);
             //get current date day for javascript
            var date  = new Date();
            var day = date.getDay();
            var dayper = (day/30)*100;
            //**************************************************************//
            //Remaining amount in percentage variable as percent[i] is spend//
            //amount percentage so subtracting spend percentage from 100 wil//
            // return remaing amount percentage                             //
            //**************************************************************//
            var rA;
            var per;
            var id;
             for(var k = 0;k<ids.length;k++)
             {
                per = percent[k];
                id  = ids[k];
                document.getElementById(id).style.width = parseInt(per)+"%";
                rA = 100 - parseInt(percent[k]);
                if(rA - dayper > 40)
                {
                    document.getElementById(id).style.background = "red";
                }
                else if((rA - dayper)>20 && (rA - dayper) < 40)
                {
                    document.getElementById(id).style.background = "yellow";
                }           
                else
                document.getElementById(id).style.background = "green";
             }            
          });


        </script>

Answer 1

What you have shown is an absolutely horrible mixture of server side and client side code. Sorry to say it but that's abominable code. Please separate those concerns. Also since you seem to be already using jQuery, I cannot find any reasonable explanation of why you are not taking advantage of it, but writing some à la 90s javascript code.

So let's see how we could improve this:

@section javascript {
    <script type="text/javascript">
        $(document).ready(function() {
            var percents = @Html.Raw(Json.Encode(ViewBag.percentage));
            var ids = @Html.Raw(Json.Encode(ViewBag.IDs));

            var date  = new Date();
            var day = date.getDay();
            var dayper = (day / 30) * 100;

            $.each(ids, function(index, id) {
                var percent = parseInt(percents[index], 10);
                var element = $('#' + id);
                element.css('width', percent + '%');
                var rA = 100 - percent;
                var color = 'green';

                if (rA - dayper > 40) {
                    color = 'red';
                } else if (rA - dayper > 20 && rA - dayper < 40) {
                    color = 'yellow';
                }

                element.css('background-color', color);
            });
        });
    </script>
}