Creating a keyboard shortcut to change the colour of a soccer/football tracker?

Question

I'm very new to Javascript/HTML and I'm trying to create a manual tracking device for soccer/football games. (By using others examples) I've gotten as far as been able to create a program to track/dot my mouse movements across my screen and record the positional coordinates in the console, yet I'm struggling on 2 issues.

Is there a way to change the colour on my tracker by using keyboard shortcuts to indicate a possession change?
If so, is it also possible to correspond the colour of my tracker/dot the the coordinates in the console for later analysis?

Here's my code so far. Please feel free to rip it apart and edit it however you see fit.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <style>
    body {
      height: 1000px;
    }
    .dot {
      width: 2px;
      height: 2px;
      background-color: black;
      position: absolute;
    }
  </style>
</head>
<body>
<script>
(function() {
    "use strict";
    var mousePos;

    document.onmousemove = handleMouseMove;
    setInterval(getMousePosition, 100); // setInterval repeats every X ms

    function handleMouseMove(event) {
        var eventDoc, doc, body;

        event = event || window.event; // IE-ism

        // If pageX/Y aren't available and clientX/Y are,
        // calculate pageX/Y - logic taken from jQuery.
        // (This is to support old IE)
        if (event.pageX == null && event.clientX != null) {
            eventDoc = (event.target && event.target.ownerDocument) || 
document;
            doc = eventDoc.documentElement;
            body = eventDoc.body;

            event.pageX = event.clientX +
              (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
              (doc && doc.clientLeft || body && body.clientLeft || 0);
            event.pageY = event.clientY +
              (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
              (doc && doc.clientTop  || body && body.clientTop  || 0 );
        }

        mousePos = {
            x: event.pageX,
            y: event.pageY
        };
    }
    function getMousePosition() {
        var pos = mousePos;
        console.log("mouse location:", pos);
        if (!pos) {
          // We haven't seen any movement yet, so don't add a duplicate dot 
        }
        else {
            // Use pos.x and pos.y
            // Add a dot to follow the cursor
            var dot;
            dot = document.createElement('div');
            dot.className = "dot";
            dot.style.left = pos.x + "px";
            dot.style.top = pos.y + "px";
            document.body.appendChild(dot);
        }
    }
 
})();
</script>
</body>
<img src="Soccer_Template.png"></img>
</html>

You can track keystrokes using an event handler: [How to take keyboard input in JavaScript?](https://stackoverflow.com/questions/4416505/how-to-take-keyboard-input-in-javascript) — George Sun, Sep 25 '21 at 00:52

PaulCrp · Answer 1 · 2021-09-19T00:37:43.413

I'm not sure i understand you're question but i'm going to try an answer.

1 - you can change the color of you're tracker using element.style.background

var dot = document.createElement('div');
dot.style.background = "red"; // Or any color, rgb, HEX you want

2 - It's possible to change the color of you're tracker dynamically to correspond of the coordinates. Just add something like

if(pos.x > 1 && pos.y > 1){
    dot.style.background = "red";
}
else{
    dot.style.background = "blue";
}

Hope it's helps

Creating a keyboard shortcut to change the colour of a soccer/football tracker?

1 Answers1