'Trying to edit a text file through my webserver hosted on my raspberry. raspberry is a hotspot and i am connected to it with my laptop

So i have a raspberry 3 running raspberry pi os (bullseye). i am running a webserver on it with apache. The raspberry is set up as a hotspot. I am connected to it with my laptop. I have made a box which is clickable and runs a function in javascript. I want this funtion to edit a textfile which is on the raspberry. I found some information about node.js and tried reading and writing the file this way. it works when running node 'filename'.js in terminal but i cant get it to work when i press the box. This is the problem i have. i want it to edit the textfile when i press the box and not just when i use node 'filename'.js in terminal.

i read something about require('fs') doesnt work locally and i dont know how to solve this.

function forwardf() {
  // Läs om variabeln är true eller false
  alert("hit kommer vi");
  document.getElementById("variabler.txt");
    var file = this.files[0];
    var reader = new FileReader();
    alert("hit kommer vi");

      // Entire file
      //alert(this.result);

      // By lines
      var lines = this.result('\n');
      for(var line = 0; line < lines.length; line++){
        alert(lines[line]);
      }
    }
    reader.readAsText(file);
  alert(text);


  /*
  //const fs = require('fs');
  //let fileString = fs.readFileSync("variabler.txt").toString();
  const line = fileString.split(/\r?\n/);
  const our_variable = line[0].split("=");
  let temp = our_variable[1];
  // Change this_var to true
  if (temp == "false") {
    //alert("temp was false");
    console.log("temp was false" + "\n");
    fileString = fileString.replace(/goforward=false/, "goforward=true");
  } 
  // else change this_var to false
  else {
    //alert("temp was true");
    console.log("temp was true" + "\n");
    fileString = fileString.replace(/goforward=true/, "goforward=false");
  }
  fs.writeFileSync("variabler.txt", fileString);
  console.log(fileString);
}
*/

.allt {
  width:1200px;
  height:700px;
  border:1px solid black;
  padding:3px;
  display:inline-flex;
}
.box {
  width:796px;
  height:690px;
  border:1px solid black;
}
.karta {
  width:460px;
  height:460px;
  border:1px solid black;
  display:inline-block;
  margin:5px 0px 0px 5px;
  text-align: center;
  float:left;
}
.autonomt {
  width:313px;
  height:460px;
  border:1px solid black;
  display:inline-block;
  text-align: center;
  margin:5px 5px 5px 5px;
}
.auto {
    width:290px;
    height:220px;
    border:1px solid black;
    margin:5px;
}
.status {
  width:290px;
  height:220px;
  border:1px solid black;
  margin:5px;
}
.konsol {
  Width:780px;
  height:200px;
  border:1px solid black;
  margin:5px 0px 0px 5px;
  text-align:center;
}
.movementbox {
    width:386px;
    height:680px;
    border:1px solid black;
    float:right;
    margin: 5px;
}
.dartbox {
  width:100px;
  height:100px;
  border:1px solid white;
  display:inline-block;
  margin:4px 5px;
  text-align: center;
}
.image {
  width:100%;
  height:100%;
  object-fit:scale-down;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <html>
    <head>
      <link rel="stylesheet" type="text/css" href="forsta_utkast_styles.css" media="screen" />
      <script type="text/javascript"
        src="funktioner.js";>
      </script>
    </head>
    <body>
    <div id="allt" class="allt">
      <div id="box" class="box">
        <div id="karta" class="karta">
          <h2>Karta</h2>
        </div>
        <div id="autonomt" class="autonomt">
          <div id="auto" class="auto">
            <h2>Autonomt</h2>
          </div>
          <div id="status" class="status">
            <p>b</p>
            <p>b</p>
            <p>b</p>
            <p>b</p>
          </div>
      </div>
      <div id="konsol" class="konsol">
        <h1>konsol</h1>
      </div>
    </div>
      <div id="movementbox" class="movementbox">
        <div id="dartbox1" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox2" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox3" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox4" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox5" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox6" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox7" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox8" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox9" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox10" class="dartbox"><img src="bilder_pilar/counter_clockwise.png" alt="fel"></div>
        <div id="forwardbox" class="dartbox" onclick="forwardf()" style="cursor:pointer;"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox12" class="dartbox"><img src="bilder_pilar/clockwise.png" alt="fel"></div>
        <div id="dartbox13" class="dartbox"><img src="bilder_pilar/leftpil.png" alt="fel"></div>
        <div id="dartbox14" class="dartbox"><img src="bilder_pilar/manuell_styrning.png" alt="fel"></div>
        <div id="dartbox15" class="dartbox"><img src="bilder_pilar/rightpil.png" alt="fel"></div>
        <div id="dartbox16" class="dartbox"><img src="bilder_pilar/land.png" alt="fel"></div>
        <div id="dartbox17" class="dartbox"><img src="bilder_pilar/backwardpil.png" alt="fel"></div>
        <div id="dartbox18" class="dartbox"><img src="bilder_pilar/lift.png" alt="fel"></div>
    </div>
    </div>
    </body>
  </html>

Solution 1:^[1]

Thats now how any of it works.

Here's why its not working: (dont ignore this, else you wont understand any of it)

There is frontend and there is backend.
- Frontend is something that runs on the browser - on the user's side. This is what the user sees.
- Backend is something that will run on the server - in this case its your Raspberry Pi.
The file read/write code that you execute from terminal, gets executed on the backend.
However, when you are adding the js file in HTML, the browser will try to execute it on the user's side - the frontend.

Here's what you need to do:

Read what REST API is
Implement a nodejs based REST API, which will also have the code to read/write the file
Call the REST API from your browser, on button click. Simplest way is to use HTML Form, and the REST API action in the form.

Good luck. Happy coding!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Dushyant Bangal

'Trying to edit a text file through my webserver hosted on my raspberry. raspberry is a hotspot and i am connected to it with my laptop

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]