title: Top attribute won't update. Function only works when I set if function value = to initial top value in javascript
body: <p>I was working on collision detection and thought I would start out simple by testing when the object reaches a certain x-position. It works when I set it to 100, the initial top value for 'character, which leads me to believe the problem is with top updating; however, I don't see why the circles would be moving if that were the case.If you could tell me how to keep 'top' updated or better yet, help me with collision detection that would be great!</p>
  
  <p>(ps. I know it's not good to put css, javascript, and html in one page. I have this as part of a website but moved it to one file so I could test it separately without looking through the code of the entire website and I will add it in the appropriate files once I get this figured out.)      </p>
  
  <pre><code> &lt;html&gt;
      &lt;head&gt;
          &lt;style&gt; 
          #character {
          position: absolute;
          width: 42px;
          height: 42px;
          background: black;
          border-radius: 50%;
          }
          #character2 {
          position: absolute;
          width: 42px;
          height: 42px;
          background: pink;
          border-radius: 50%;
      } &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;div id = 'character'&gt;&lt;/div&gt;
      &lt;div id = 'character2'&gt;&lt;/div&gt;
  
      &lt;script&gt;
      var keys = {};
              keys.UP = 38;
              keys.LEFT = 37;
              keys.RIGHT = 39;
              keys.DOWN = 40;
              keys.W = 87;
              keys.A = 65;
              keys.D = 68;
              keys.S = 83;
  
          /// store reference to character's position and element
          var character = {
            x: 1000,
            y: 100,
            speedMultiplier: 1,
            element: document.getElementById("character")
          };
  
          var character2 = {
            x: 100,
            y: 100,
            speedMultiplier: 3,
            element: document.getElementById("character2")
          };
  
  
          /// key detection (better to use addEventListener, but this will do)
          document.body.onkeyup = 
          document.body.onkeydown = function(e){
            /// prevent default browser handling of keypresses
            if (e.preventDefault) { 
              e.preventDefault();
            }
            else {
              e.returnValue = false; 
            }
            var kc = e.keyCode || e.which;
            keys[kc] = e.type == 'keydown';
          };
  
          /// character movement update
          var moveCharacter = function(dx, dy){
            character.x += (dx||0) * character.speedMultiplier;
            character.y += (dy||0) * character.speedMultiplier;
            character.element.style.left = character.x + 'px';
            character.element.style.top = character.y + 'px';
          };
  
       var moveCharacter2 = function(dx, dy){
            character2.x += (dx||0) * character2.speedMultiplier;
            character2.y += (dy||0) * character2.speedMultiplier;
            character2.element.style.left = character2.x + 'px';
            character2.element.style.top = character2.y + 'px';
          };
          /// character control
          var detectCharacterMovement = function(){
            if ( keys[keys.LEFT] ) {
              moveCharacter(-1, 0);
            }
            if ( keys[keys.RIGHT] ) {
              moveCharacter(1, 0);
            }
            if ( keys[keys.UP] ) {
              moveCharacter(0, -1);
            }
            if ( keys[keys.DOWN] ) {
              moveCharacter(0, 1);
            }
             if ( keys[keys.A] ) {
              moveCharacter2(-1, 0);
            }
            if ( keys[keys.D] ) {
              moveCharacter2(1, 0);
            }
            if ( keys[keys.W] ) {
              moveCharacter2(0, -1);
            }
            if ( keys[keys.S] ) {
              moveCharacter2(0, 1);
            }
          };
  
  
          /// update current position on screen
          moveCharacter();
          moveCharacter2();
  
          /// game loop
          setInterval(function(){
            detectCharacterMovement();
          }, 1000/24);
  
      function getPosition() {
  
        var elem   = document.getElementById("character");
      var top = getComputedStyle(elem).getPropertyValue("top");
      if (top == '200px') {
          alert ("hi");
      }
      getPosition() 
      }
      getPosition()
      //     var pos1 = document.getElementById('character').style.top
  
  
      &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>