From 9b9f31420ea9ed5365fb717441c41b571bec7921 Mon Sep 17 00:00:00 2001
From: Simon <sfja.skp@edu.mercantec.dk>
Date: Fri, 10 Feb 2023 18:33:33 +0100
Subject: [PATCH] frontend: fix event listeners

---
 frontend/src/main.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 1b0b738..702cab7 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -126,7 +126,7 @@ function setupMap(
     const mapImg = document.querySelector<HTMLImageElement>("#map")!;
     const fetcher = new Throttler(200);
 
-    mapImg.onmousemove = async (event: MouseEvent) => {
+    mapImg.addEventListener('mousemove', async (event: MouseEvent) => {
         const mousePosition: Position = { x: event.offsetX, y: event.offsetY };
         displayMousePosition(mousePositionElement, mousePosition);
 
@@ -139,9 +139,9 @@ function setupMap(
         displayCoords(coordsElement, coords);
 
         fetcher.call(async () => await fetchAndDisplayZipCode(coords));
-    };
+    });
 
-    mapImg.onmouseup = async (event: MouseEvent) => {
+    mapImg.addEventListener("mouseup", async (event: MouseEvent) => {
         const mousePosition: Position = { x: event.offsetX, y: event.offsetY };
         displayMousePosition(mousePositionElement, mousePosition);
 
@@ -154,7 +154,7 @@ function setupMap(
         displayCoords(coordsElement, coords);
 
         fetcher.call(async () => await fetchAndDisplayZipCode(coords));
-    }
+    });
 
     mapImg.onmouseleave = (_event: MouseEvent) => {
         displayZipCode(zipCodeElement, null, null, null, null);
@@ -167,10 +167,10 @@ function setupSearchBar(zipCodeElement: HTMLParagraphElement) {
     const searchInput =
         document.querySelector<HTMLInputElement>("#search-input")!;
 
-    // Prevent typing letters
-    searchBar.onkeypress = event => {
-        event.key !== "Enter" || !isNaN(parseInt(event.key));
-    }
+    searchInput.addEventListener("keydown", (event) => {
+        if (event.key.length === 1 && !"0123456789".includes(event.key))
+            event.preventDefault();
+    });
 
     searchBar.addEventListener("submit", async (event: Event) => {
         event.preventDefault();