started with fetch

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

@@ -1,19 +1,13 @@
-document.querySelectorAll('button').forEach(button => {
+window.onload = function () {
-    button.addEventListener('click', function() {
+  const form = document.getElementById("form");
-        const direction = this.value;
+  form.onclick = function (event) {
-        fetch('/move', {
+    event.preventDefault();
-            method: 'POST',
+    fetch("/move", {
-            headers: {
+      method: "GET",
-                'Content-Type': 'application/x-www-form-urlencoded',
+    })
-            },
+      .then((response) => {})
-            body: new URLSearchParams({ direction: direction }),
+      .then(() => {
-        })
+        fetch
-        .then(response => response.json())
+      });
-        .then(data => {
+  };
-            document.getElementById('response').innerText = data.message;
+};
-        })
-        .catch(error => {
-            document.getElementById('response').innerText = 'Er is een fout opgetreden: ' + error;
-        });
-    });
-});

src/Python/flask/web/templates/index.html

@@ -12,7 +12,7 @@
         <img src="kobuki.jpg" alt="Kobuki Robot" id="robot-image" />
       </div>
       <div class="button-section">
-        <form action="/" method="post">
+        <form id = "form" action="/" method="post">
           <button class="btn" name="direction" value="left">←</button>
           <button class="btn" name="direction" value="up">↑</button>
           <button class="btn" name="direction" value="right">→</button>