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.

I have two div elements and one img element:

    <div class="game-container">

      <div class="bubble-container">

    <img src="https://raw.githubusercontent.com/diegoleonardoro/bronx_tourism/master/line.png" class="line" width="128"
        height="12" />
    </div>

  </div>

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;

    line.style.left = r + "px";
    line.style.left = 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());:

console.log("r", r);

Thanks in advance!