title: How can I use javascript to insert images randomly into a table?
body: <p>I'm very new to javascript and I'm creating a game where a user re-arranges a table of pictures by clicking. The images are really scrambled pieces of a larger image that the user has to sort out.</p>
  
  <p>The user clicks on one of the images in the table, then clicks another image in the table, and they swap positions. I have to use javascript for this, so Ive created a 3x4 table and filled it with 12 "partial" images that need to be re-arranged.</p>
  
  <p>Each time the page loads, I need to have the images in each cell to be randomly assigned so that each game, the user has to sort the images in a different way.</p>
  
  <p>To do this, I use a diffImage() function that picks a random image from an array of images that I have. So if one of my images is named "mario01.jpg", the function takes the image and makes it <code>&lt;img src="mario01.png" /&gt;</code>. </p>
  
  <p>My diffImage() function also takes that image that it selected out of the array so that the image won't be inserted for a second time into the table.</p>
  
  <p>What I am wondering is, how do I incorporate the diffImage() function into my html where I set up the table so that every time the page loads, the images are in different cells? </p>
  
  <p>Here is the code I have done so far:</p>
  
  <pre><code>&lt;head&gt;
  &lt;link rel="stylesheet" href="hw3CSS.css" type="text/css"/&gt;
  &lt;title&gt;Picture Scramble Game&lt;/title&gt;
  &lt;/head&gt;
  &lt;script&gt;
  var imagelist = ["mario01.jpg", "mario02.jpg", "mario03.jpg", "mario04.jpg", "mario05.jpg", "mario06.jpg", "mario07.jpg", "mario08.jpg", "mario09.jpg", "mario10.jpg", "mario11.jpg", "mario12.jpg"];
  
  
  function diffImage() {
      whichImage = Math.floor(Math.random()*imagelist.length);
      document.write('&lt;img src="'+imagelist[whichImage]+'" /&gt;');
      imagelist.splice(whichImage,1);
  }
  
  
  &lt;/script&gt;
  &lt;body onload="addEventListeners();"&gt;
  &lt;/script&gt;
  &lt;div id="table"&gt;
  &lt;table&gt;
      &lt;tr&gt;&lt;td&gt;&lt;img class="element" id="image1" src="mario02.jpg" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;img class="element" id="image2" src="mario02.jpg" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;img class="element" id="image3" src="mario01.jpg" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;img class="element" id="image4" src="mario05.jpg" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;img class="element" id="image5" src="mario04.jpg" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;img class="element" id="image6" src="mario06.jpg" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;img class="element" id="image7" src="mario09.jpg" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;img class="element" id="image8" src="mario08.jpg" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;img class="element" id="image9" src="mario07.jpg" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;img class="element" id="image10" src="mario11.jpg" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;img class="element" id="image11" src="mario10.jpg" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;img class="element" id="image12" src="mario12.jpg" /&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>