title: How to create a single onclick event for multiple div elements
body: <p>I'm still learning my way through all this stuff but what I was trying to do now was create a Tic-Tac-Toe game out of HTML, CSS &amp; Javascript. However no matter what I try my onClick events won't run correctly. I just want the game to respond to the click by the player, send the identity of the tile clicked to the function so that it knows which one to change, and then change the tile's image (to either a nought or a cross).</p>
  
  <p>I'm thinking that the best way to do this is have the onClick pass a different argument through depending on the <code>id</code> of the tile clicked but it's telling me that <code>placeTile()</code> isn't defined and besides there has to be an easier way to do it than the cocktail that I've conceived. Thanks for your help in advance! :)</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt; Tic-Tac-Toe &lt;/title&gt;
      &lt;link type='text/css' rel='stylesheet' href='Tic-Tac-Toe.css'/&gt;
      &lt;script type='text/javascript' src='JQuery/jquery-1.11.1.js'&gt;&lt;/script&gt;
      &lt;script type='text/javascript' src='Tic-Tac-Toe.js'&gt;&lt;/script&gt;
  &lt;/head&gt;    
  
  &lt;body&gt;
      &lt;div id='game'&gt;
          &lt;div id='container'&gt;
              &lt;div id='board'&gt;
                  &lt;div class='emptyTile' id='NW' onClick='placeTile("NW")'&gt;&lt;/div&gt;
                  &lt;div class='emptyTile' id='N' onClick='placeTile("N")'&gt;&lt;/div&gt;
                  &lt;div class='emptyTile' id='NE' onClick='placeTile("NE")'&gt;&lt;/div&gt;
                  &lt;div class='emptyTile' id='W' onClick='placeTile("W")'&gt;&lt;/div&gt;
                  &lt;div class='emptyTile' id='C' onClick='placeTile("C")'&gt;&lt;/div&gt;
                  &lt;div class='emptyTile' id='E' onClick='placeTile("E")'&gt;&lt;/div&gt;
                  &lt;div class='emptyTile' id='SW' onClick='placeTile("SW")'&gt;&lt;/div&gt;
                  &lt;div class='emptyTile' id='S' onClick='placeTile("S")'&gt;&lt;/div&gt;
                  &lt;div class='emptyTile' id='SE' onClick='placeTile("SE")'&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id='scores'&gt;
              &lt;div class='score' id='Score1'&gt; Player 1: &lt;br/&gt; &lt;span id='pOne' class='num'&gt;0&lt;/span&gt;&lt;/div&gt;
              &lt;div class='score' id='Score2'&gt; Player 2: &lt;br/&gt; &lt;span id='pTwo' class='num'&gt;0&lt;/span&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The Javascript Function:</p>
  
  <pre><code>function placeTile(a){
      var tile = document.getElementById(a);
      if (currentPlayer == 0) {
          tile.removeClass('emptyTile');
          tile.addClass('cross');
          currentPlayer = 1;
      } else {
          tile.removeClass('emptyTile');
          tile.addClass('nought');
          currentPlayer = 0;
      }
  }
  </code></pre>
  
  <p>So as you can see I'm doing this in a roundabout way, but the onclick event is supposed to pass the id of the div to the function, which is then used to make all the necessary changes to that div only and also swap the current player. But it is very messy and I;m sure I could clean it up somehow if I could just figure out how to make one javascript function react differently depending on what div is clicked...</p>
  
  <p>Oh I love code but I also hate it too. It's addictive really.</p>