title: Simple Javascript Tic-Tac-Toe game
body: <p>I'm trying to write a simple tic-tac toe game, but I'm having a problem with two things:</p>
  
  <ol>
  <li><p>My 3x3 board does not split into different rows - when I try to make more game tiles it just puts it along the same row</p></li>
  <li><p>I can create new X and O images by copying my code at the bottom, but I do not know how to lock them in place once they've been played.</p></li>
  </ol>
  
  <p>Here's my current HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;style type="text/css"&gt;
      #div1 {
          width: 80px;
          height: 80px;
          padding: 10px;
          border: 1px solid #aaaaaa;
          float:left;
      }
      &lt;/style&gt;
      &lt;script type="text/javascript"&gt;
      function allowDrop(ev) {
          ev.preventDefault();
      }
      function drag(ev) {
          ev.dataTransfer.setData("Text",ev.target.id);
      }
      function drop(ev) {
          var data=ev.dataTransfer.getData("Text");
          ev.target.appendChild(document.getElementById(data));
          ev.preventDefault();
      }
      &lt;/script&gt;
      &lt;title&gt;JavaScript  Drag &amp;amp; Drop Tic-Tac-Toe&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;p&gt;Drag the X and O images into the tic-tac-toe board:&lt;/p&gt;
          &lt;div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
          &lt;div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
          &lt;div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
  
  
          &lt;img id="drag1" src="X.png" draggable="true" 
              ondragstart="drag(event)" width="75" height="75" /&gt;
          &lt;img id="drag2" src="O.png" draggable="true" 
              ondragstart="drag(event)" width="75" height="75" /&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>