CODEWITHSUNDEEP
javascripthtmlcss
ChippeRockTheMurph
ChippeRockTheMurph

Reputation: 455

Inserting Random Values into a Table JS

I am trying to generate a random name with a click of a button and then have that random name be inserted into a HTML table that looks a little something like this:

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
tr:nth-child(even) {
  background-color: #dddddd;
}
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <table>
      <tr>
        <th>Black</th>
        <th>Blue</th>
        <th>B & B</th>
        <th>Ex-Tm #1</th>
        <th>Ex-Tm #2</th>
        <th>Gryphons</th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

What I am trying to do is with a click of a button var round1 will randomly pick a name from var round1names and will insert it into the Cell 1,1, then randomly pick from the remaining names and insert that name into Cell 1,2... and do this until there is only 1 name left that will be inserted into Cell 1,6 of the Table, all in a click of a button, here is my JS Code so far:

function myFunction()
{
  var round1names = ['Forrest Gump', 'Tim Thomas', 'Pamila Henryson', 'Lotus Hobbes', 'Jerry Sparks', 'Kenneth Ingham'];
  var round1 = round1names[Math.floor(Math.random()*round1names.length)];
}
<!DOCTYPE html>
<html>
  <body>
    <button type="button" onclick="myFunction()">Click me</button>
  </body>
</html>

Upvotes: 1

Views: 396

Answers (2)

MSH
MSH

Reputation: 297

Here is my solution.Everytime you click the button, it will select random from the list. The selected value wont be selected the next time you click it. It loops until the list is empty. 

$('#document').ready(function(){
     var round1names = ['Forrest Gump', 'Tim Thomas', 'Pamila Henryson', 'Lotus Hobbes', 'Jerry Sparks', 'Kenneth Ingham']; 
     var arr = $('#table1 > tbody > tr').map(function ()
    {
    return $(this).children().map(function ()
    {
    return $(this);
    });
});
  var row = 0; 
  var col = 1 ;

$('#button').click(function(){  
   var valueAdded = false;
   var isListEmpty = false; 
   if(round1names.length <1){
       isListEmpty = true;
   }
if(!isListEmpty){
 while(!valueAdded){
    var index = Math.floor((Math.random() * round1names.length));
    if(round1names[index] !=null){
    arr[col][row].text(round1names[index]);
    valueAdded = true;
    round1names.splice(index,1);
    row++;
    }
    }
}else{
alert("list is empty")
}

    })
 })

Here is the fiddle https://jsfiddle.net/qtgqsmkz/2/

Upvotes: 2

jypweb
jypweb

Reputation: 46

Here's what I came up with on jsFiddle:

var x = 0, //starting column Index
cells = document.getElementsByTagName('td')
names = ['Forrest Gump', 'Tim Thomas', 'Pamila Henryson', 'Lotus Hobbes', 'Jerry Sparks', 'Kenneth Ingham'];

function myFunction(namesArray)
{
    var round1names = namesArray.slice(0);
    while (round1names.length > 0 && x < cells.length) {
    var randomIndex = Math.floor(Math.random()*round1names.length);
    cells[x].innerHTML = round1names[randomIndex];
    x++;
    round1names.splice(randomIndex, 1);
  }
}

(https://jsfiddle.net/vuehc4n2/3/)

and then on the button's onclick, pass in the array of names:

<button type="button" onclick="myFunction(names)">Click me</button>

I've moved the names array outside of the function and then pass it in to myFunction. The function creates a copy of the array and then randomly inserts a name from that array into the table column. If there were more than 6 names, it would automatically wrap to the next row below. Then, it removes the name from the array copy. Once all the names are gone/used, the function is complete.

Creating the copy of the array will allow you to click the button multiple times.

Hope this helps!

Upvotes: 2

Related Questions