title: Assigning Random Values to Each of the Cells in a Row
body: <p>I have some code here that with the click of a button it randomly selects from a list of values entered into a text box, I have managed to manipulate it so that it enters the randomly generated value into the first cell of a table, but I was wondering if it was possible with the click of a button to randomly assign a different value to each of the cells in a row? Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var rnd = function () {
    var loader, things;
    loader = document.getElementById('ajax-loader');
    loader.style.display = 'inline';
    things = document.getElementById('things').value;
    things = things.replace(', ', ',');
    things = things.split(',');
    setTimeout(function () {
     var thing;
     loader.style.display = 'none';
     thing = Math.floor(Math.random() * things.length);
     document.getElementById('result').innerHTML = things[thing];
    }, 500);
   };
   
   // a little functionality for erin foley...
  
   // save the things the user entered
   document.getElementById('things').addEventListener('blur', function ( evt ) {
    window.localStorage['things-to-be-picked'] = this.value
   })
  
   // use the user’s saved things
   document.addEventListener('DOMContentLoaded', function ( evt ) {
    var things = window.localStorage['things-to-be-picked']
    if ( things ) {
     document.getElementById('things').value = things
    }
   })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> fieldset input {
    display: block;
   }
   #result {
    border: solid 1px black;
    background: #e0e0e0;
    padding: 1em;
    margin: 1em 0;
   }
   #ajax-loader {
    display: none;
    margin-bottom: -4px;
   }
  
   table {
       font-family: arial, sans-serif;
       border-collapse: collapse;
      width: 75%;
   }
   td,
   th {
       border: 1px solid #dddddd;
       text-align: left;
       padding: 8px;
       text-align: center
   }
   tr:nth-child(even) {
       background-color: #dddddd;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
        &lt;body&gt;
  &lt;table align="center"&gt;
  &lt;thead&gt;
  &lt;tr&gt;
  &lt;th&gt;&lt;/th&gt;
  &lt;th&gt;Black&lt;/th&gt;
  &lt;th&gt;Blue&lt;/th&gt;
  &lt;th&gt;B &amp;amp; B&lt;/th&gt;
  &lt;th&gt;Gold&lt;/th&gt;
  &lt;th&gt;Green&lt;/th&gt;
  &lt;th&gt;Gryphons&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
  &lt;td&gt;
   &lt;form method="get" action="/" onsubmit="return false;"&gt;
    &lt;fieldset&gt;
     &lt;label&gt;
      &lt;textarea style="width: 400px;height: 35px;" name="things" id="things"&gt;Forrest Gump, Tim Thomas, Pamila Henryson, Lotus Hobbes, Jerry Sparks, Kenneth Ingham&lt;/textarea&gt;
     &lt;/label&gt;
    &lt;/fieldset&gt;
    &lt;p&gt;
     &lt;input type="button" value="Pick one!" onclick="rnd();"&gt;
     &lt;img id="ajax-loader" src="http://andrew.hedges.name/experiments/random/ajax-loader.gif" alt="Picking..."&gt;
    &lt;/p&gt;
   &lt;/form&gt;
  &lt;/td&gt;
  &lt;td&gt;&lt;div id="result"&gt;&lt;/div&gt;&lt;/td&gt;
  &lt;td&gt;&lt;div id="result"&gt;&lt;/div&gt;&lt;/td&gt;
  &lt;td&gt;&lt;div id="result"&gt;&lt;/div&gt;&lt;/td&gt;
  &lt;td&gt;&lt;div id="result"&gt;&lt;/div&gt;&lt;/td&gt;
  &lt;td&gt;&lt;div id="result"&gt;&lt;/div&gt;&lt;/td&gt;
  &lt;td&gt;&lt;div id="result"&gt;&lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>EDIT: Even though an error shows the snippet still works.</p>
  
  <p>Here is some code that does exactly what I want the above snippet to do:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var round1 = ['Forrest Gump', 'Tim Thomas', 'Pamila Henryson', 'Lotus Hobbes', 'Jerry Sparks', 'Kenneth Ingham'];
  var round2 = ['Cyril Willard', 'Gale Frank', 'Aveline Derricks', 'Darcey Bullock', 'Jaiden Deering', 'Glenn Benn'];
  var round3 = ['George Washington', 'John Adams', 'Tom Jefferson', 'James Madison', 'James Monroe', 'John Quincy Adams'];
  /* game is a multidimensional array. 
  |  Each element is an array(sub-array).
  |  Each sub-array is a row in a table.
  |  Each element of a sub-array is a cell.
  */
  var game = [round1, round2, round3];
  // count will be incremented per click of button
  var count = 0;
  
  function rounds(n, obj) {
    
  // Determine which sub-array to use
  var array = obj[n - 1];
    
  // Determine the specific &lt;tr&gt;
  var row = 'tr:nth-of-type(' + n + ')';
   
  // Reference each &lt;td&gt; cell of the &lt;tr&gt; row
  var cells = document.querySelectorAll('tbody ' + row + ' td');
    
  // Cell count
  var x = 0;
    
  // Separate each element of sub-array
  array = array.slice(0);
    
  // while loop establishes limits and iteration
  while (array.length &gt; 0 &amp;&amp; x &lt; cells.length) {
  
  // Get a randomly generated number 
  var randomIndex = Math.floor(Math.random() * array.length);
  
  /* On each iteration...
  |  ...insert the element of sub-array...
  |  ...that was determined by a randomly...
  |  ...generated index number.
  */
  cells[x].innerHTML = array[randomIndex];
  
  // Increment cell count
  x++;
  
  // Join all of the cells together in it's new order
  array.splice(randomIndex, 1);
  }
   }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 75%;
  }
  td,
  th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
    text-align: center
  }
  tr:nth-child(even) {
    background-color: #dddddd;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>     &lt;!DOCTYPE html&gt;
           &lt;html&gt;
           &lt;body&gt;
  &lt;table id="example" class="display" align=center&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Black&lt;/th&gt;
      &lt;th&gt;Blue&lt;/th&gt;
      &lt;th&gt;B &amp;amp; B&lt;/th&gt;
      &lt;th&gt;Gold&lt;/th&gt;
      &lt;th&gt;Green&lt;/th&gt;
      &lt;th&gt;Gryphons&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
   &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;div style="padding:25px" align=center&gt;
  &lt;!-- This button's attribute event has a incremental counter, so each successive click will change the count parameter --&gt;
  &lt;button type="button" onclick="count++;rounds(count, game)"&gt;Simulate to next round&lt;/button&gt;
  
  &lt;/div&gt;
   &lt;/body&gt;
              &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>