CODEWITHSUNDEEP
javascripthtml-tableaddeventlistener
Ulysse Corbeil
Ulysse Corbeil

Reputation: 79

How do I put randomly generated numbers into a table?

I need to put 6 randomly generated numbers in a an HTML table, I was wondering what would be the best solution, this is my JS code :

function GenerateNumber(){

var sResultat = "";
var iCompteur;
for(iCompteur=0;iCompteur<=6;iCompteur++)
   { 
    sResultat = Math.round(Math.random()* 18) + 1;
   }
}

Would calling them with the AddEventListener work? I need to make it appear everytime I load the page, and of course, the numbers need to be different if I reload the page.

Here is my HTML code : (I put numbers temporarily to test my code and to show where I want them to appear)

<div class="table">
                 <table>

                    <tr>
                        <th>FORce</th>
                        <th>DEXtérité</th>
                        <th>CONstitution</th>
                        <th>INTelligence</th>
                        <th>SAGesse</th>
                        <th>CHArisme</th>
                    </tr>

                     <tr>
                        <td class = "FOR">
                         5
                        </td>

                        <td class = "DEX">
                         4
                        </td>

                        <td class= "CON">
                         4
                        </td>

                        <td class ="INT">
                         4
                        </td>

                        <td class="SAG">
                         4
                        </td>

                        <td class="CHA">
                         3
                        </td>
                     </tr>


                </table>

            </div>

Upvotes: 0

Views: 40

Answers (2)

ajai Jothi
ajai Jothi

Reputation: 2294

function GenerateNumber(){
  var tds = document.querySelectorAll('.table td');
  
  return Array.prototype.forEach.call(tds, function(td){
      td.innerHTML = Math.round(Math.random()*18) + 1;
  });
}

window.onload = GenerateNumber;
<div class="table">
                 <table>

                    <tr>
                        <th>FORce</th>
                        <th>DEXtérité</th>
                        <th>CONstitution</th>
                        <th>INTelligence</th>
                        <th>SAGesse</th>
                        <th>CHArisme</th>
                    </tr>

                     <tr>
                        <td class = "FOR">
                         5
                        </td>

                        <td class = "DEX">
                         4
                        </td>

                        <td class= "CON">
                         4
                        </td>

                        <td class ="INT">
                         4
                        </td>

                        <td class="SAG">
                         4
                        </td>

                        <td class="CHA">
                         3
                        </td>
                     </tr>


                </table>

            </div>

Upvotes: 0

larz
larz

Reputation: 5766

   function generateNumber() {
  var sResultat
  var cells = ["FOR", "DEX", "CON", "INT", "SAG", "CHA"]
  cells.forEach(function(cell) {
    sResultat = Math.round(Math.random() * 18) + 1;
    document.getElementsByClassName(cell)[0].innerText = sResultat
  })
}

generateNumber()
<div class="table">
  <table>

    <tr>
      <th>FORce</th>
      <th>DEXtérité</th>
      <th>CONstitution</th>
      <th>INTelligence</th>
      <th>SAGesse</th>
      <th>CHArisme</th>
    </tr>

    <tr>
      <td class="FOR">
      </td>

      <td class="DEX">
      </td>

      <td class="CON">
      </td>

      <td class="INT">
      </td>

      <td class="SAG">
      </td>

      <td class="CHA">
      </td>
    </tr>

  </table>

</div>

Upvotes: 1

Related Questions