title: Javascript Animation Not Functioning Properly
body: <p>I made this script for a "reel" that should move up or down on the click of an up or down arrow. However, I have two issues:</p>
  
  <p>1)The up arrow moves it down and the down arrow moves it up<br>
  2)After it has executed once I am unable to execute it again, I receive an error saying it was unable to parse "top".</p>
  
  <p>Any idea on why this might be happening? I pasted all the code below. it isn't pretty, but it has everything there.</p>
  
  <pre><code>&lt;!doctype html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Tales of the Hartland: Homepage&lt;/title&gt;
  
  &lt;style type="text/css"&gt;
  
  /* ID DEFINITIONS */
  
  #reelHolder {
      height: 750px;
      width: 800px;
      overflow: hidden;
      border: 1px solid gray;
      position: relative;
      left:50%;
      margin-left:-400px;
  }
  
  #arrowDown {
      z-index:auto;
      position:relative;
      left:87.4%;
  }
  
  #arrowUp {
      z-index:auto;
      position:relative;
  }
  
  #reel {
      position: relative;
  }
  
  /*CLASS DEFINITIONS */
  
  .banner {
      position: relative;
      left:50%;
      margin-left:-600px;
  }
  
  .arrow {
      width:50px;
      height:50px;
  }
  
  .reeler {
      width:600px;
      height:300px;
      position: relative;
      left:50%;
      margin-left:-300px;
      margin-top:50px;
  }
  
  .break {
      height:0px;
  }
  
  .bigBreak {
      height:50px;
  }
  
  &lt;/style&gt;
  
  
  &lt;script&gt;
  //REEL UP
  function reelUp(elem) {
  
  elem = document.getElementById(elem);
  
  var down = 0;
  var curLoc = elem.style.top;
  
  function frame() {
  
      down++
  
      elem.style.top = down + curLoc + 'px';
  
      if (down == 300)
          clearInterval(id);
  }
  
  var id = setInterval(frame, 10) // draw every 10ms
  
  }
  
  //REEL DOWN
  function reelDown(elem) {
  
  elem = document.getElementById(elem);
  
  var down = 0;
  var curLoc = elem.style.top;
  
  function frame() {
  
  down++
  
  
      elem.style.top = (-1 * down) + curLoc + 'px';
  
      if (down == 300)
          clearInterval(id);
  }
  
  var id = setInterval(frame, 10) // draw every 10ms
  
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;img src="Banner.png" width="1200" height="150" alt="" class="banner"/&gt;
  
      &lt;a id="arrowUp" class="arrow" href="javascript:reelUp('reel')"&gt;
          &lt;img src="arrowUp.png" alt=""/&gt;
      &lt;/a&gt;
  
      &lt;a id="arrowDown" class="arrow" href="javascript:reelDown('reel')"&gt;
          &lt;img src="arrowDown.png" alt=""/&gt;
      &lt;/a&gt;
  
    &lt;div id="reelHolder" class="centerDiv"&gt;
  
  
      &lt;div id="reel"&gt;
          &lt;img src="reel1.png" class="reeler" id="reel1"/&gt;
          &lt;div class="break"&gt;&lt;/div&gt;
          &lt;img src="reel2.png" class="reeler" id="reel2"/&gt;
      &lt;/div&gt;
  
  
  
    &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>