Assign a value to cell in a HTML table

Question

I have an array of random numbers and want to count the number of times each number appears in the array.

I have the following code but am unable to figure out how to assign the count values in the html table.

JavaScript:

<script>
    var arr = [];

    function getRandom(num) {
        return Math.round(Math.random() * num) + 1;
    }

    for (var i = 0; i < 1000; i++) {
        arr.push(getRandom(30));

    }

    var count1 = 0;
    var count2 = 0;
    var count3 = 0;
    var count4 = 0;
    var count5 = 0;

    for (var i = 0; i < 1000; i++) {
        if (arr[i] == 1) {
            count1++;
        }
    }
    for (var i = 0; i < 1000; i++) {
        if (arr[i] == 2) {
            count2++;
        }
    }
    for (var i = 0; i < 1000; i++) {
        if (arr[i] == 3) {
            count3++;
        }
    }
    for (var i = 0; i < 1000; i++) {
        if (arr[i] == 4) {
            count4++;
        }
    }
    for (var i = 0; i < 1000; i++) {
        if (arr[i] == 5) {
            count5++;
        }
    }

    }
</script>

HTML:

<table border="1">
    <tr>
        <td>Number</td>
        <td>Frequency</td>
    </tr>
    <tr>
        <td>1</td>
        <td id="count1" </td>
    </tr>
    <tr>
        <td>2</td>
        <td id="count2"></td>
    </tr>
    <tr>
        <td>3</td>
        <td id="count3"></td>
    </tr>
    <tr>
        <td>4</td>
        <td id="count4"></td>
    </tr>
    <tr>
        <td>5</td>
        <td id="count5"></td>
    </tr>
    <tr>
</table>

Answer 1

Use the below code

function f(){
var arr = [];

    function getRandom( num ){
       return Math.round(Math.random() * num)+1;
    }
   for (var i = 0; i < 1000; i++) {
       arr.push(getRandom( 30 ));    
   }
 var count1=0;
 var count2=0;
 var count3=0;
 var count4=0;
 var count5=0;


  for (i=0;i<1000;i++){
    if(arr[i]==1){
      count1++;
      }

     if(arr[i]==2){
     count2++;
      }

       if(arr[i]==3){
         count3++;
    }
      if(arr[i]==4){
        count4++;
    }
      if(arr[i]==5){
       count5++;
      }
  }

document.getElementById("count1").innerHTML=count1;
document.getElementById("count2").innerHTML=count2;
document.getElementById("count3").innerHTML=count3;
document.getElementById("count4").innerHTML=count4;
document.getElementById("count5").innerHTML=count5;
}

Demo

Answer 2

It would be better (simpler and quicker) to use a second array to count the frequencies, at the same time as you assign the random numbers, then check this array and put the values into the table cells. Also, easier to identify the table cells by a class rather than giving them all similar id s. ( jsfiddle )

var arr = [], counts = [],
    countCells = document.getElementsByClassName('count');

function getRandom(num) {
    return Math.round(Math.random() * num) + 1;
}
for (var i = 0; i < 1000; i++) {
    var r = getRandom(30);
    arr.push(r);
    counts[r] = (counts[r] || 0) + 1;
}
for (var i = 0; i < countCells.length; i++) {
    countCells[i].innerHTML = counts[i + 1] || 0;
}

Answer 3

Not the issue but you could simplify the process and get a count for all the values :

var arr    = [],
    totals = [];

function getRandom(num) {
    return Math.round(Math.random() * num) + 1;
}

for(var i=0; i<1000; i++) {
    var val   = getRandom(30),
        count = totals[val] || 0;

    arr.push(val);
    totals[val] = ++count;
}