title: How get my ticker variable to change my totalMoves when the user is able to move a piece?
body: <p>I was making a 15 piece slider puzzle and came across a problem. I want my start function to track the amount of moves the user takes until the user wins, but I haven't been able to understand why it doesn't work. It says my totalMoves variable is undefined so how do I define it? I tried using ticker.innerHTML when totalMoves changed but had no luck.</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 gamePiece;
  var notify;
  var timer;
  var spaceY;
  var spaceX;
  var ticker;
  
  function initialize() {
      var puzzleArea = document.getElementById("puzzlearea");
      gamePiece = puzzleArea.getElementsByTagName("div"); //retrieve element within puzzlearea
  
      for (var i = 0; i &lt; gamePiece.length; i++) //applies features to each puzzle piece 
  
      {
  
          gamePiece[i].className = 'puzzlepiece'; //setting up the puzzle piece code
  
          gamePiece[i].style.left = (i % 4 * 100) + 'px'; //calculates the position for puzzle pieces from the left of the screen
  
          gamePiece[i].style.top = (parseInt(i / 4) * 100) + 'px'; //calculates the position for puzzle pieces from the top of the screen
  
  
  
  
  
  
          gamePiece[i].onmouseover = function () //applies features when mouse moves over puzzle pieces
  
          {
              if (checkMove(parseInt(this.innerHTML))) //checks whenever a move is made
  
              {
  
                  this.style.border = "3px solid red"; //changes to red when a puzzle piece is near an empty space
  
                  this.style.color = "#006600"; //text color changes to green when a puzzle piece is near an empty space
  
                  this.style.textDecoration = "underline"; //underlines the number of the puzzle piece piece
              
                  display();
  
              }
          }
  
  
          gamePiece[i].onmouseout = function () //activates whenever mouse moves out of puzzle piece
  
          {
  
              this.style.border = "2px solid black"; //reverts to its original size border 
  
              this.style.color = "#000000"; //reverts to original text color
  
              this.style.textDecoration = "none"; //reverts to original text state
  
          }
  
  
          gamePiece[i].onclick = function () //activates when mouse clicks on a puzzle piece
          {
              if (checkMove(parseInt(this.innerHTML))) //checks whether or not the puzzle piece can move into an empty space
  
              {
                  swap(this.innerHTML - 1); //moves into an empty space if true
  
  
                  if (finish()) //checks when the all the 15 pieces are in its right space
  
                  {
  
                      win(); //alerts the player that they have won the game
  
                  }
  
                  return;
              }
          }
      }
  }
  
  
  spaceX = '300px';
  spaceY = '300px';
  
  
  
  function checkMove(position) // returns true whenever a piece can be moved into an empty space
  
  {
  
      if (left(spaceX, spaceY) == (position - 1))
  
      {
          
          return true;
          totalMoves++;
          
  
      }
  
  
  
      if (down(spaceX, spaceY) == (position - 1))
  
      {
  
          return true;
          totalMoves++;
          
          
  
      }
  
  
  
      if (up(spaceX, spaceY) == (position - 1))
  
      {
  
          return true;
          totalMoves++;
          
          
  
      }
  
  
  
      if (right(spaceX, spaceY) == (position - 1))
  
      {
  
          return true;
          totalMoves++;
          
          
  
      }
      
  }
  
  
  function Notify() //notifies the user 
  
  {
  
      notify--; //decrements the value of 
  
      if (notify == 0) //if the value reaches the end then
  
      {
  
          var body = document.getElementsByTagName('body'); //retrieves body element in html
  
          body[0].style.backgroundImage = "none"; //reverts to original page background
  
          alert('Winner! ... Shuffle and Play Again'); //tells the user that they have won the game 
  
          para[0].style.visibility = "visible"; //reverts visiblity to its original state
  
          return;
  
      } else(notify % 2)
  
      {
  
          var body = document.getElementsByTagName('body');
  
      }
  
      timer = setTimeout(Notify, 100); //notifies the user for 1 secs
  }
  
  function win() //notifies user that they have won
  
  {
  
      var body = document.getElementsByTagName('body');
  
  
  
  
      notify = 10; //initializes notify variable
  
      timer = setTimeout(Notify, 10);
  
      para[0].style.visibility = "hidden"; //hides text when user is being notified
  
  }
  
  function finish() //checks when the game reaches its end
  
  {
  
      var flag = true;
  
      for (var i = 0; i &lt; gamePiece.length; i++) //for each puzzle piece 
      {
  
          var top = parseInt(gamePiece[i].style.top);
  
          var left = parseInt(gamePiece[i].style.left);
  
  
          if (left != (i % 4 * 100) || top != parseInt(i / 4) * 100) //checks if each piece matches its left and top position
  
          {
  
              flag = false;
  
              break;
  
          }
  
      }
  
      return flag;
  
  }
  
  
  
  function left(x, y) //calculates how far to the left a puzzlepiece should position
  
  {
  
      var cordX = parseInt(x);
  
      var cordY = parseInt(y);
  
  
  
      if (cordX &gt; 0)
  
      {
  
          for (var i = 0; i &lt; gamePiece.length; i++)
  
          {
  
              if (parseInt(gamePiece[i].style.left) + 100 == cordX &amp;&amp; parseInt(gamePiece[i].style.top) == cordY)
  
              {
  
                  return i;
  
              }
  
          }
  
      } else
  
      {
  
          return -1;
  
      }
  
  }
  
  
  
  function right(x, y) //calculates how far to the right a puzzlepiece should position
  {
  
      var cordX = parseInt(x);
  
      var cordY = parseInt(y);
  
      if (cordX &lt; 300)
  
      {
  
          for (var i = 0; i &lt; gamePiece.length; i++) {
  
              if (parseInt(gamePiece[i].style.left) - 100 == cordX &amp;&amp; parseInt(gamePiece[i].style.top) == cordY)
  
              {
  
                  return i;
  
              }
  
          }
  
      } else
  
      {
  
          return -1;
  
      }
  
  }
  
  
  
  function up(x, y) //calculates how far up a puzzlepiece should position
  {
  
      var cordX = parseInt(x);
  
      var cordY = parseInt(y);
  
      if (cordY &gt; 0)
  
      {
  
          for (var i = 0; i &lt; gamePiece.length; i++)
  
          {
  
              if (parseInt(gamePiece[i].style.top) + 100 == cordY &amp;&amp; parseInt(gamePiece[i].style.left) == cordX)
  
              {
  
                  return i;
  
              }
  
          }
  
      } else
  
      {
  
          return -1;
  
      }
  
  }
  
  
  
  function down(x, y) //calculates how far down a puzzlepiece should position
  
  {
  
      var cordX = parseInt(x);
  
      var cordY = parseInt(y);
  
      if (cordY &lt; 300)
  
      {
  
          for (var i = 0; i &lt; gamePiece.length; i++)
  
          {
  
              if (parseInt(gamePiece[i].style.top) - 100 == cordY &amp;&amp; parseInt(gamePiece[i].style.left) == cordX)
  
              {
  
                  return i;
  
              }
  
          }
  
      } else
  
      {
  
          return -1;
  
      }
  
  }
  
  
  
  function swap(position) //moves the puzzle piece by switching position with an empty space
  {
  
      var temp = gamePiece[position].style.top;
  
      gamePiece[position].style.top = spaceY;
  
      spaceY = temp;
  
      temp = gamePiece[position].style.left;
  
      gamePiece[position].style.left = spaceX;
  
      spaceX = temp;
  
  }
  
  function start()
  {
      totalMoves = 0;
      ticker = document.getElementById("Moves");
  }
  
  function display()
  {
      ticker.innerHTML = totalMoves;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      background-color: white;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
  }
  
  #controls,
  #overall,
  #puzzlearea {
      width: 400px;
  }
  
  #controls {
      padding-top: 10px;
      text-align: center;
  }
  
  h1 {
      margin: 10px 0px;
      text-align: center;
  }
  
  /* Used to center the puzzle. */
  #overall {
      margin-left: auto;
      margin-right: auto;
  }
  
  /* The area that holds the 15 puzzle pieces. */
  #puzzlearea {
      font-size: 32px;
      height: 400px;
      padding: 0px;
      position: relative;
  }
  
  /* This class should be applied to each of the 15 puzzle pieces. */
  .puzzlepiece {
      border: 2px solid black;
      height: 96px;
      line-height: 96px;
      position: absolute;
      text-align: center;
      vertical-align: middle;
      width: 96px;
  }
  
  /* This class should be applied to a puzzle piece that can be moved. */
  .movablepiece:hover {
      border-color: red;
      color: #006600;
      text-decoration: underline;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;title&gt; 15 Slider Puzzle&lt;/title&gt;
     
      &lt;link rel="stylesheet" type="text/css" href="15 Slider.css" /&gt;
          &lt;script src="15 Slider.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;head&gt;
      &lt;body onload = "initialize()"&gt;
        &lt;h1&gt;Slider Puzzle&lt;/h1&gt;
        &lt;div id="overall"&gt;
          &lt;div id="puzzlearea"&gt;
            &lt;!-- the following are the fifteen puzzle pieces --&gt;
            &lt;div&gt;1&lt;/div&gt;  &lt;div&gt;2&lt;/div&gt;  &lt;div&gt;3&lt;/div&gt;  &lt;div&gt;4&lt;/div&gt;
            &lt;div&gt;5&lt;/div&gt;  &lt;div&gt;6&lt;/div&gt;  &lt;div&gt;7&lt;/div&gt;  &lt;div&gt;8&lt;/div&gt;
            &lt;div&gt;9&lt;/div&gt;  &lt;div&gt;10&lt;/div&gt; &lt;div&gt;11&lt;/div&gt; &lt;div&gt;12&lt;/div&gt;
            &lt;div&gt;13&lt;/div&gt; &lt;div&gt;14&lt;/div&gt; &lt;div&gt;15&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="controls"&gt;&lt;/div&gt;
          &lt;button onclick = "start();"&gt;Start&lt;/button&gt;
        &lt;button onclick = "reset();"&gt;Reset&lt;/button&gt;
        &lt;br&gt;
      Number Of Moves: &lt;span id="Moves"&gt;0&lt;/span&gt;
        &lt;/div&gt;&lt;!--content--&gt;
        &lt;br&gt;
      &lt;/head&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>