fixed error

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

@@ -1,46 +1,45 @@
-// Selecteer alle knoppen en voeg een event listener toe aan elke knop
-document.querySelectorAll(".btn").forEach((button) => {
-  button.addEventListener("click", function (event) {
-    event.preventDefault(); // voorkomt pagina-verversing
+document.addEventListener("DOMContentLoaded", function () {
+  document.querySelectorAll(".btn").forEach((button) => {
+    button.addEventListener("click", function (event) {
+      event.preventDefault(); // prevents page refresh
 
-    // Haal de waarde van de knop op
-    const direction = event.target.value;
+      // Get the value of the button
+      const direction = event.target.value;
 
-    fetch("/move", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({ direction: direction }),
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        console.log("Success:", data);
+      fetch("/move", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ direction: direction }),
       })
-      .catch((error) => {
-        console.error("Error:", error);
-      });
+        .then((response) => response.json())
+        .then((data) => {
+          script;
+          console.log("Success:", data);
+        })
+        .catch((error) => {
+          console.error("Error:", error);
+        });
+    });
   });
 
   // Fetch data from the server
   async function fetchData() {
+    try {
       const response = await fetch("/data");
       const data = await response.json();
       return data;
-
+    } catch (error) {
+      console.error("Error:", error);
+    }
   }
-
   // Parse the data and show it on the website
   async function parseData() {
     const data = await fetchData();
-
-    if(!data){
-      console.error("No data received");
-      return;
-    }
     const sensorDataContainer = document.getElementById("sensor-data");
     sensorDataContainer.innerHTML = ""; // Clear previous data
-    //for each object in json array create a new paragraph element and append it to the sensorDataContainer
+    // For each object in JSON array, create a new paragraph element and append it to the sensorDataContainer
     for (const [key, value] of Object.entries(data)) {
       const dataElement = document.createElement("p");
       dataElement.textContent = `${key}: ${value}`;
@@ -48,6 +47,15 @@ document.querySelectorAll(".btn").forEach((button) => {
     }
   }
 
+  // Update the image
+  function updateImage() {
+    var img = document.getElementById("robot-image");
+    img.src = "/image?" + new Date().getTime(); // Add timestamp to avoid caching
+  }
+
   // Fetch and display sensor data every 5 seconds
-  setInterval(parseData, 5000);
+  setInterval(parseData, 1000);
+
+  // Update the image every 5 seconds
+  setInterval(updateImage, 200);
 });