Javascript Event Handler in Python web page not working

Question

I have a web page generated by Python which needs to have a Javascript event handler enabled. The code below returns an error: node is not defined.

The following question has an answer which looks very promising, but I am missing the "node" variable assignment. I would add a comment, but the system won't let me do so. It says I need a reputation of 50 to add a comment.

Detecting arrow key presses in JavaScript

<BODY>
<script type="text/javascript">
node.addEventListener("keydown", function(event) {
    const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
});
switch (event.key) {
    case "ArrowLeft":
        // Left pressed
        alert( "Left Arrow" );
        break;
    case "ArrowRight":
        // Right pressed
        alert( "Right Arrow" );
        break;
    case "ArrowUp":
        // Up pressed
        alert( "Up Arrow" );
        break;
    case "ArrowDown":
        // Down pressed
        alert( "Down Arrow" );
        break;
}
</script>

Nick Parsons · Accepted Answer · 2019-06-27T04:23:58.003

Assuming you want to listen for keydown events on your entire page you can replace node with document which is already defined within JS. You'll also need to move your switch statement inside the event listener's callback function like so:

document.addEventListener("keydown", function(event) {
  event.preventDefault(); // prevent page from scrolling
  const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
  switch (key) { // change to event.key to key to use the above variable
    case "ArrowLeft":
      // Left pressed
      alert("Left Arrow");
      break;
    case "ArrowRight":
      // Right pressed
      alert("Right Arrow");
      break;
    case "ArrowUp":
      // Up pressed
      alert("Up Arrow");
      break;
    case "ArrowDown":
      // Down pressed
      alert("Down Arrow");
      break;
  }
});

body {
  height: 200vh;
}

<p>Some text</p>

Explanation:

Essentially document represents your entire page. You can add an event listener to your document (ie page) such that a function will execute when something happens. In our code, we're adding a keydown event listener which means we want to execute some code when a key is pressed down. The code which will run is the code in the function(event) {...}. When an event occurs, we can get specific details about that event from the event argument passed into the triggered function. We can get many details from the event object passed into our function, and one of those is the key which was pressed. In our code we get the key pressed using evet.key and then store it in a variable called key. We then use a switch statement to check which key was pressed, and execute the relevent code if a specific key appears.

Thank you! That works. I don't understand exactly why, but I will study it to get my head around it. — lrhorer, Jun 23 '19 at 12:57
I think I do understand this, now, but I do have one remaining question: How do I disable the arrow keys for the scroll functions? I want to dedicate the action of the arrow keys to this function, regardless of whether the page extends beyond the edge of the screen. — lrhorer, Jun 26 '19 at 23:35
You can add `event.preventDefault();` (see example code snippet) to stop the page from scrolling. — Nick Parsons, Jun 27 '19 at 03:24

Javascript Event Handler in Python web page not working

1 Answers1