Solution 1 :

I was able to fix it just by subtracting the difference of the result of console.log(“r”, r); and the result of console.log(“Black Line”, line.getBoundingClientRect().left) ;

I don’t understand why I had do to this subtraction. If anyone has any insight please share it.

Problem :

I have two div elements and one img element:

    <div class="game-container">

      <div class="bubble-container">

    <img src="" class="line" width="128"
        height="12" />


In my JavaScript, I am trying to add and an event listener to the div “game-container”. This event listener is supposed add some movement to the image tag, like so:

  var yellowBox = document.querySelector(".game-container");
  var line = document.querySelector(".line");

yellowBox.addEventListener("mousemove", function (e) {

    var r = e.clientX; = r + "px"; = r + "px";

    console.log("Black Line", line.getBoundingClientRect());
    console.log("r", r);


The result that I am expecting is the result of the variable r to be the same as the variable line, as I move the mouse. However, this not what I am getting. As I move the muse, the position of the these two elements is not the same. When If check the two console logs this is what I get:

console.log("Black Line", line.getBoundingClientRect());:

enter image description here

console.log("r", r);

enter image description here

Thanks in advance!


Comment posted by MARSHMALLOW

Do you mean