title: Collision two divs in Javascript
body: <p>Iam trying to get collision between two divs(1st is circle, 2nd is rect) which are controlled by arrows.
  When the div1 touches div2, the div1 should be placed back to a start position.</p>
  <p>The div1 is not getting to start position after the collision.
  Iam getting an else alert(&quot;test1&quot;) when pressing the arrow to move div.</p>
  <p>code:</p>
  <pre><code>let div1 = document.getElementById('div1').getBoundingClientRect();
  let div1Top = div1.top;
  let div1Left = div1.left;
  let div1Right = div1.right
  let div1Bottom = div1.bottom
  
  let div2 = document.getElementById('div2').getBoundingClientRect();
  let div2Top = div1.top;
  let div2Left = div1.left;
  let div2Right = div1.right
  let div2Bottom = div1.bottom
  
  if ((div2Top &gt; div1Top &amp;&amp; div2Top &lt; div1Bottom)||(div2Bottom &gt; div1Top &amp;&amp; div2Bottom &lt; div1Bottom)) {
    div1.style.top = 0 + &quot;px&quot;;
  } else{
    alert(&quot;test1&quot;);
  }
  
  if ((div2Right &gt; div1Left &amp;&amp; div2Right &lt; div1Right)||(div2Left &lt; div1Right &amp;&amp; div2Left &gt; div1Left)) {
    div1.style.top = 0 + &quot;px&quot;;
  } 
  else{
    alert(&quot;test&quot;);
  }
  
  
  </code></pre>