Блог

У меня есть div, который перемещается при нажатии клавиш со стрелками. Если div достигает определенной позиции, полученной по координатам, на экране, я хочу запустить функцию, изменив innerHTML div. Какой простой для понимания способ сделать это?

 <div class="counter" id="yellow">P1</div>
<div id="div"></div>
  

 document.onkeydown = detectKey;
function detectKey(e) {
  if (selectedElement) {
    if (e.keyCode == '39') {
      var posLeft = selectedElement.offsetLeft
      selectedElement.style.left = (posLeft   150)   "px"
    }
    if (e.keyCode == '38') {
      var posTop = selectedElement.offsetTop
      selectedElement.style.top = (posTop - 150)   "px"
    }
    if (e.keyCode == '37') {
      var posLeft = selectedElement.offsetLeft
      selectedElement.style.left = (posLeft - 150)   "px"
    }
    if (e.keyCode == '40') {
      var posTop = selectedElement.offsetTop
      selectedElement.style.top = (posTop   150)   "px"
    }
  }
}
  

 if (document.getElementById("yellow").position = x = 89, y = 273) {
document.getElementById("div").innerHTML = "Made it!"
}
  

Ниже приведен некоторый код в качестве примера. Первое главное, что для атрибута стиля позиции элемента должно быть установлено значение absolute . Затем мы можем использовать атрибуты стиля left и right для изменения позиции. Для проверки позиции вы можете использовать .getBoundingClientRect(); который выдает прямоугольник. Затем мы используем верхнюю часть как y, а левую — как y. Теперь в моем примере я использую некоторые фиктивные значения, но если вы хотите запустить его, переместите его вниз один раз, ofc вы можете изменить значения в операторе if, чтобы он запускался там, где вы хотите.

 <div class="counter" id="yellow" style="position:absolute">P1</div>
<div id="div"></div>
<script>
    let selectedElement = document.getElementById("yellow")
    document.onkeydown = detectKey;
    function detectKey(e) {
        if (selectedElement) {
            console.log(e.keyCode)
            if (e.keyCode == '39') {
                console.log('here')
                var posLeft = selectedElement.offsetLeft
                selectedElement.style.left = (posLeft   150)   "px"
            }
            if (e.keyCode == '38') {
                var posTop = selectedElement.offsetTop
                selectedElement.style.top = (posTop - 150)   "px"
            }
            if (e.keyCode == '37') {
                var posLeft = selectedElement.offsetLeft
                selectedElement.style.left = (posLeft - 150)   "px"
            }
            if (e.keyCode == '40') {
                var posTop = selectedElement.offsetTop
                selectedElement.style.top = (posTop   150)   "px"
            }
            let pos = selectedElement.getBoundingClientRect();
            let y = pos.top
            let x = pos.left
            console.log(x)
            console.log(y)
            // put your own values or ranges here
            if (x < 100 amp;amp; y > 100) {
                document.getElementById("div").innerHTML = "Made it!"
            }
        }

    }
</script>