CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-table
SK233
SK233

Reputation: 9

Entering data directly into a table

I'm making a simple Math website for a friend and she wants some kind of probability aspect to it. I have been trying to display the number of dice rolls on a table. This is what I have.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Click the button to display the number you have rolled on the dice.</p>

<button onclick="myFunction()">Roll the Dice!</button>

<p id="demo2"></p>

<table> 
<tr>
 <th>Number</th>
 <th>Times Rolled</th>
 </tr>
 <tr>
 <td>One</td>
 <td>"value"</td>
 <tr/>
 <tr>
 <td>Two</td>
 <td>"value"</td>
 </tr>
 <tr>
 <td>Three</td>
 <td>"value"</td>
 </tr>
  <tr>
 <td>Four</td>
 <td>"value"</td>
 </tr>
  <tr>
 <td>Five</td>
 <td>"value"</td>
 </tr>
  <tr>
 <td>Six</td>
 <td>"value"</td>
 </tr>
 
 </table>
 


<script>
function myFunction() {
  var x = Math.floor((Math.random() * 6) + 1);
  document.getElementById("demo2").innerHTML = x;
}
</script>

this creates a random dice roll.

I then need each dice roll to populate into the table below in the correct space.

I want each dice roll to add to the table so at any given time the user can stop and see how many times they rolled any given number.

can anyone help me? cheers.

Upvotes: 1

Views: 68

Answers (1)

Devsi Odedra
Devsi Odedra

Reputation: 5322

You can do something below

var i = 1;
function myFunction() {
  var x = Math.floor((Math.random() * 6) + 1);
  document.getElementById("demo2").innerHTML = x;
  
  var newRow=document.getElementById('numberTable').insertRow();
  newRow.innerHTML = "<td>"+i+"</td><td> "+x+"</td>";
  i++;
}
 <p>Click the button to display the number you have rolled on the dice.</p>

<button onclick="myFunction()">Roll the Dice!</button>

<p id="demo2"></p>




<table id="numberTable"> 
<tr>
 <th>Number</th>
 <th>Times Rolled</th>
 </tr>

 

 </table>

Upvotes: 2

Related Questions