If div is at a certain position, trigger javascript function

Question

I have a div that moves when the arrow keys are pressed. If the div reaches a certain position, got by coordinates, on the screen, I want a function to run, changing the innerHTML of a div. What is a simple-to-understand way to do this?

<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!"
}

Answer 1

Below is some code as example. The first main thing is that the element position style attribute has to be set to absolute. Then we can use the left and right style attributes to change to position. To check the position u can use .getBoundingClientRect(); which gives a rect. Then we use the top as y and the left as y. Now i my example i am using some dummy values but if you want to trigger move it down once, ofc you can change the values in the if statement to get it to trigger where you want it.

<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 && y > 100) {
                document.getElementById("div").innerHTML = "Made it!"
            }
        }

    }
</script>