Refactor button event handling to send direction via fetch to /send-direction

src/Python/flask/web/static/script.js

@@ -1,23 +1,25 @@
-document.getElementById("form").addEventListener("submit", function(event) {
+// Selecteer alle knoppen en voeg een event listener toe aan elke knop
-  event.preventDefault(); // voorkomt het herladen van de pagina
+document.querySelectorAll(".btn").forEach(button => {
+  button.addEventListener("click", function(event) {
+    event.preventDefault(); // voorkomt pagina-verversing
 
-  // Haal de waarde van de ingedrukte knop op
+    // Haal de waarde van de knop op
-  const formData = new FormData(event.target);
+    const direction = event.target.value;
-  const direction = formData.get("direction"); // Haalt de 'direction' waarde op
 
-  // Verstuur de richting via fetch naar de server
+    // Verstuur de richting naar de server met fetch
-  fetch("/move", {
+    fetch("/send-direction", {
-    method: "POST",
+      method: "POST",
-    headers: {
+      headers: {
-      "Content-Type": "application/json"
+        "Content-Type": "application/json"
-    },
+      },
-    body: JSON.stringify({ direction: direction })
+      body: JSON.stringify({ direction: direction })
-  })
+    })
-  .then(response => response.json())
+    .then(response => response.json())
-  .then(data => {
+    .then(data => {
-    console.log("Success:", data);
+      console.log("Success:", data);
-  })
+    })
-  .catch(error => {
+    .catch(error => {
-    console.error("Error:", error);
+      console.error("Error:", error);
+    });
   });
 });