title: Reset Button in Javascript Tic Tac Toe Game
body: <p>I'm making a Javascript Tic Tac Toe Game, and I'm having trouble with the reset button. I believe that in my clickHandler function, I should be calling the blankPattern function. It's not working, though.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Tic Tac Toe&lt;/title&gt;
          &lt;style&gt;
              #stage {
                  position:relative;
              }
  
              .cell {
                  position:absolute;
                  border:3px solid black;
                  background-color:white;
                  font-size: 300px;
                  text-align: center;
                  color: red;
              }
  
              #reset {
                  font-family: "Lucida Console", Monaco, monospace;
                  color: white;
                  height: 100px;
                  width: 150px;
                  background-color:black;
                  top: 45%;
                  left: 50%;
                  position: absolute;
                  font-size: 30px;
  
              }
  
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="stage"&gt;&lt;/div&gt;
          &lt;button id = "reset"&gt;Reset&lt;/button&gt;
  
  &lt;script&gt;
  
  var reset = document.querySelector("#reset");
  reset.style.cursor = "pointer";
  reset.addEventListener("click", clickHandler, false);
  
  
  // GRAB A REFERENCE TO THE STAGE
  var stage = document.querySelector("#stage");
  
  // THE SIZE AND SPACE OF EACH CELL
  var SIZE = 290;
  var SPACE = 0;
  
  // THE ARRAY DIMENSIONS - TRY CHANGING THESE TO GET LARGER OR SMALLER GRAPHS
  var MAXROWS = 3;
  var MAXCOLS = 3;
  
  // THE 2D ARRAY THAT DEFINES THE PATTERN
  var pattern = blankPattern();
  
  
  // CREATE THE DIVS and POSITION THEM IN THE STAGE... BUT DON'T WORRY ABOUT COLORING THEM HERE!!!!
  for (var row = 0; row &lt; MAXROWS; row++) {
  
      for (var col = 0; col &lt; MAXCOLS; col++) {
  
          // CREATE A DIV HTML ELEMENT CALLED CELL
          var cell = document.createElement("div");
  
          // SET ITS CSS CLASS TO CELL
          cell.setAttribute("class", "cell");
  
          // GIVE EACH OF THE CREATED DIVS A UNIQUE ID
          // BASED ON THE ROW# AND COL#
          // EXAMPLE : &lt;div id="c-1-2" class="cell"&gt;&lt;/div&gt;
          // In this example, row = 1 and col = 2
          cell.setAttribute("id", "c-" + row + "-" + col);
  
          // !!!!!   ADD A CLICK HANDLER TO EACH OF THE INDIVIDUAL DIVS
          cell.addEventListener("click", cellClick, false);
  
          // ADD THE DIV HTML ELEMENT TO THE STAGE
          stage.appendChild(cell);
  
          // POSITION THE CELL IN THE CORRECT PLACE
          // WITH 10 PIXELS OF SPACE AROUND IT
          cell.style.width = SIZE + "px";
          cell.style.height = SIZE + "px";
          cell.style.top = row * (SIZE + SPACE) + "px";
          cell.style.left = col * (SIZE + SPACE) + "px";
  
      }
  
  }
  
  colorPattern();
  
  
  // ***********************************************************************************************
  // ***********************************************************************************************
  // ***********************************************************************************************
  // FUNCTION DECLARATIONS
  // ***********************************************************************************************
  // ***********************************************************************************************
  // ***********************************************************************************************
  // ***********************************************************************************************
  
  function blankPattern() {
      // ***********************************************************************
      // This function creates a new 2D array based on the size of the MAXROWS and MAXCOLS
      // All cells of the array are initialized to 0
      // The function RETURNS this new 2D array back to the calling function
      // ***********************************************************************
      // CREATE A LOCAL VARIABLE TO HOLD THE 2D ARRAY
      var newPattern = [];
      // LOOP THROUGH ALL THE ROWS
      for (var row = 0; row &lt; MAXROWS; row++) {
          // EACH ROW OF THE ARRAY.. .IS ALSO AN ARRAY... SO INITIALIZE IT TO BE ONE
          newPattern[row] = [];
          // LOOP THROUGH ALL THE COLUMNS OF THE ARRAY
          for (var col = 0; col &lt; MAXCOLS; col++) {
              // INITIALIZE ALL THE CELL VALUES TO BE 0
              newPattern[row][col] = 0;
          }
      }
      // RETURN THIS NEW ARRAY BACK TO THE CALLING FUNCTION
      return newPattern;
  }
  
  
  function colorPattern() {
      // ***********************************************************************
      // This function uses the GLOBAL VARIABLE "pattern" to color the divs
      // ***********************************************************************
      for (var row = 0; row &lt; MAXROWS; row++) {
          for (var col = 0; col &lt; MAXCOLS; col++) {
  
              var cell = document.querySelector("#c-" + row + "-" + col);
  
              // COLOR THE CELL IF IT'S ARRAY VALUE IS "1"
              if (pattern[row][col] === 0) {
                  cell.innerHTML = "";
              } else if (pattern[row][col] === 1) {
                  cell.innerHTML = "X";
              } else if (pattern[row][col] === 2) {
                  cell.innerHTML= "O";
              }
          }
      }
  }
  
  
  function cellClick() {
      // RIP APART THE DIV ID THAT WAS CLICKED ON
      // WERE HIDING THE ROW AND COLUMN IN THE ID
      // THE FORMAT OF THE ID IS "C-ROW#-COL#"
      // EXAMPLE : &lt;div id="c-1-2" class="cell"&gt;&lt;/div&gt;
      // In this example, row = 1 and col = 2
      var zpos;
  
  
  
      thisid = "0-1"
  
  
      // THE "this" KEYWORD RETURNS THE HTML ELEMENT THAT WAS CLICKED ON
      var thisid = this.id;
  
      zpos = thisid.indexOf("-");
      thisid = thisid.substr(zpos+1);
  
      zpos = thisid.indexOf("-");
      var thisRow = thisid.substr(0,zpos);
      var thisCol = thisid.substr(zpos+1);
  
      // now that we have the row and column for this div... change the array 
      if (pattern[thisRow][thisCol] === 0) {
          pattern[thisRow][thisCol] = 1;
      }
      else if (pattern[thisRow][thisCol] === 1) {
          pattern[thisRow][thisCol] = 2;
      }
      else {
          pattern[thisRow][thisCol] = 0;
      } 
  
  
  
  
      colorPattern();
  }
  
  function clickHandler ()
              {
                  pattern = blankPattern();
              }
  
  
  &lt;/script&gt;       
  
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>