dynamic table that needs random colors

Question

I need to do for homework somthing Relatively simple....

i need to to dynamic table that get's random colors and random number for each in the table... now, my problem is a strange one...

there are sum varaible's that i give them a number and Expect that id do somthing simple like this sum=4+2 the result he give me is 42 Instead of 6...

this is my code, i hope somone can help me..

<script type="text/javascript" language="javascript">
function buildTable(){
   // gets the number that inserted to the text box
   rows=document.getElementById("txtNumber").value;

   // alert error masssege
   // if    (1): the textBox(txtNumber)is empty
   // or if (2): the value in the text box is not a number
   // or if (3): the value in the text box is not between 1-15
   if (rows=="" || !IsNumeric(rows) || rows<1 || rows>15)
      alert("invalid number!");
   else{
      ////////////////////// Add your code here ////////////////////// 

      //varables
      randomNumbers=new Array();
      var index=0;

      for(var h=0;h<(rows*4)-4;h++){
         randomNumbers[h]=Math.floor(Math.random()*101);
      }

      //here start printing table + print first line to the html document
      document.write("<table>");
      getFirstrow(randomNumbers,rows,index);
      index=rows;
      //print table with out first or last row
      for(var i=0;i<rows-2;i++){
         var newColor=randomColor();
         document.write(index+" ");
         document.write("<tr>");
         document.write("<td style=background-color:"+newColor+">"+randomNumbers[index]+ "</td>");
         for(var j=0;j<rows-2;j++){
            document.write("<td>"+ "< src='face.png' />"+ "</td>");
         }
         newColor=randomColor();
         document.write("<td style=background-color:"+newColor+">" + randomNumbers[index+1]+ "</td>");
         document.write("</tr>");
         index=index+2;
      }//end of for

      index=(rows*3)-4;
      //print last row of table
      getLastrow(randomNumbers,rows,index);
      document.write("</table>");
      getSum(randomNumbers);
   }//End of Else
}//end of buildTable

//////////////////////////////////////function get first  row//////////////
function  getFirstrow(randomNumbers,rows,index){
   document.write("<tr>");
   for(var j=index;j<index+rows;j++){
      newColor=randomColor();
      document.write("<td style=background-color:"+newColor+">"+ randomNumbers[j]+ "</td>");
   }
   document.write("</tr>");
   // return  randomNumbers;
}//end of function

function  getLastrow(randomNumbers,row,index){
   a=(row+(row-2)*2);
   sum=0;
   sum=index+row;

   document.write("<tr>");
   for( j=index;j<sum;j++){
      newColor=randomColor();
      document.write("<td style=background-color:"+newColor+">"+ randomNumbers[j]+ "</td>");
      document.write("<p style=color:blue>"+j+"</p>") ;

      document.write(sum+" ");
   }

   document.write("</tr>");

   // return  randomNumbers;
}//end of function 

//////////////////////////////////////function that gets random color//////////////////
function getDecimalColor(colorList){
   newColor="#";
   for(x in colorList){
      switch(colorList[x]){
      case 10:colorList[x]="AA";break;
      case 11:colorList[x]="BB";break;
      case 12:colorList[x]="CC";break;
      case 13:colorList[x]="DD";break;
      case 14:colorList[x]="EE";break;
      case 15:colorList[x]="FF";break;
      default:colorList[x]=colorList[x].toString()+ colorList[x].toString();
      }
      newColor+=colorList[x];
   }//end of for
   return newColor;
}//END OF FUNCTION 

///////////////////////////function for random color//////////////////
function randomColor(){
   var color=new Object();
   var colorarray=new Array();
   color.r=Math.floor(Math.random()*16);
   color.g=Math.floor(Math.random()*16);
   color.b=Math.floor(Math.random()*16);
   colorArray=new Array(color.r,color.g,color.b);
   color.decimalcolor=getDecimalColor;

   newColor = color.decimalcolor(colorArray);
   return newColor;
}//end of random color

///////////////////////////get random numbers///////////////////////////
function getRandomNumbers(){
   return Math.floor(Math.random()*101)
}

//////////////////////////get sum of all the random number////////////////////////////////////
function getSum(randomNumbers){
   var sum=0;
   for(x in randomNumbers){
      sum+= randomNumbers[x]; 
   } 
   alert("the sum is: "+sum);  
}

// help function that checks if a text is a number
function IsNumeric(sText){
   var ValidChars = "0123456789.";
   var IsNumber=true;
   var Char;

   for (i = 0; i < sText.length && IsNumber == true; i++){
      Char = sText.charAt(i);
      if (ValidChars.indexOf(Char) == -1){
         IsNumber = false;
      }
   }
   return IsNumber;
}//end of is numeric
</script>

Answer 1

+ operator is depends on data types - in your case it means string concatenation . You have to convert used variable to number (I suppose int) with parseInt() or (value * 1)

function getSum(randomNumbers)
{                   
   var sum=0;
   for(x in randomNumbers)
   {
      sum+= parseInt(randomNumbers[x]); 
   } 
   alert("the sum is: "+sum);  
}

Answer 2

I assume the part of the code you are talking about is the following:

sum = index+row;

Try this:

sum = parseInt(index) + parseInt(row);