title: collision detection with js div doesn't move
body: <p>I am trying to do a movable div with collision detection and if the div collides with another div it changes position but the div doesn't even move i can't use animate since i should check the collision
  let bubbleContainer = document.querySelectorAll(&quot;.bubble-container&quot;)</p>
  <pre><code>let bubbleContainer = document.querySelectorAll(&quot;.bubble-container&quot;)
  var newq = makeNewPosition();
  animateBubble(bubbleContainer)
  
  function makeNewPosition(){
  
      // Get viewport dimensions (remove the dimension of the div)
      var h = $(window).height() - 200;
      var w = $(window).width() - 200;
  
      var nh = Math.floor(Math.random() * h);
      var nw = Math.floor(Math.random() * w);
  
      return [nh,nw];
  
  }
  
  async function animateBubble(classobject){
    var array  = Array.from(classobject);
    for (var i = 0; i &lt; array.length; i++){
      classobject[i].style.top = getComputedStyle(classobject[i]).top;
      classobject[i].style.left = getComputedStyle(classobject[i]).left;
    }
      var moving = setInterval(()=&gt;{
        var array  = Array.from(classobject);
        for (var i = 0; i &lt; array.length; i++){
          var array  = Array.from(classobject);
          classobject[i].style.top = Number(classobject[i].style.top) &lt; this.newq[0] ? Number(classobject[i].style.top) + 1 + &quot;px&quot; : Number(classobject[i].style.top) - 1 + &quot;px&quot;
          classobject[i].style.left = Number(classobject[i].style.left) &lt; this.newq[1] ? Number(classobject[i].style.left) + 1 + &quot;px&quot; : Number(classobject[i].style.left) - 1 + &quot;px&quot;
          console.log(classobject[i].style.top)
          console.log(classobject[i].style.left)
          var xi = Number(classobject[i].style.left);
          var yi = Number(classobject[i].style.top);
          var ri = Number(classobject[i].style.width)/2;
          if (classobject[i].style.top == this.newq[0] &amp;&amp; classobject[i].style.left == this.newq[1]){
            this.newq = makeNewPosition();
          }
          array.splice(i,1);
          for (var j = 0; j &lt; array.length; j++){
            var xj = Number(classobject[j].style.left);
            var yj = Number(classobject[j].style.top);
            var rj = Number(classobject[j].style.width)/2;
            var dx = Math.abs(xi - xj);
            var dy = Math.abs(yi - yj);
            var dist = Math.sqrt(dx**2 + dy**2);
            if (dist &lt;= rj + ri) {
              this.newq = makeNewPosition();
            }
          }
        }
      },500)
  
  };
  </code></pre>
  <p>logging classobject[i].style.top, and classobject[i].style.left it always says 1 px
  also if i put var newq = makeNewPosition(); outside the set interval (where it should be) the set interval function says it is undefined</p>