Как проверить, равна ли горизонтальная позиция мыши переменной в Javascript

Question

Я работаю над проектом обучения javascript (без jQuery), и мне нужно проверить, совпадает ли горизонтальное положение мыши с переменной.

У меня есть div, который следует за мышью вокруг, и когда его горизонтальное положение равно положению другого div, я хочу что-то сделать.

Вот что у меня есть:

    var x = e.clientX; 

    var otherVar = 200;

    document.getElementById('testDiv').style.left = otherVar + "px";

    if (x == otherVar) {

        //do stuff

    } else {

        //do other stuff

    }

Я проверил его, и он, кажется, не работает, однако на консоли не отображаются ошибки.

Я ценю вашу помощь.

Answer 1

document.getElementById ожидает строку, и вы должны слушать mousemove событие:

Это должно помочь вам в правильном направлении. Удачи.

//define your vars:
var otherDiv = document.getElementById("otherDiv"),
    testDiv = document.getElementById("testDiv"),
    otherVar = otherDiv.offsetLeft; //otherDiv's left position in px
//add event listener:
document.addEventListener("mousemove", onmousemove);
//handle the event:
function onmousemove(e) {
  var x = e.clientX; //get the current x position
  testDiv.style.left = x + "px"; //move testDiv
  if (x >= otherVar) {
    //do stuff
    testDiv.style.backgroundColor = "green";
  } else {
    //do other stuff
    testDiv.style.backgroundColor = "red";
  }
};

body {
  margin:0;
  background: #eee;
}
#otherDiv {
  position: relative;
  margin-left: 30%;
  width: 70%;
  height: 20px;
  background-color: blue;
}
#testDiv {
  position: absolute;
  left: 0;
  top: 20px;
  width: 100px;
  height: 100px;
  background-color: red;
}

<div id="otherDiv">otherDiv</div>
<div id="testDiv">testDiv</div>