Rewrite HTML file using only JavaScript in header

Question

I have an HTML file with this code:

<html>

  <head>

    <script>

      function saveTextArea() {

        var newText = document.getElementById("textArea");

        <!-- rewrite this file with <textarea id = 'textArea'> newText </textarea> -->

      }

    </script>

  </head>

  <body>

    <button id = 'saveBtn'>Save</button>

    <br>

    <textarea id='textArea1'>MyText</textarea>

  </body>

</html>

My use case is: In the browser, I rewrite what is in textarea. After, I press on the save button. In that moment I want to rewrite my HTML file with the new text in textarea, such that when reopening HTML file it will have a new text.

I want to do that without additional files. Can it be done using only javascript in the header? If yes, how?

It is recommended that you use a server-side language for this. — Unmitigated
– Unmitigated, Commented Aug 12, 2018 at 13:45

Anandhu · Accepted Answer · 2018-08-12 13:01:31Z

2

No, That is not possible without any serverside code because when the browser requests a file (like http://localhost/index.html) server returns a copy of the fileindex.html. If you make an update to the Document(DOM) (via javascript) it won't be reflected in the original location. it is true for static files too.ie,file:///path/to/somefile.html

The final note is that you cannot update the real file(somefile.html) using javascript in the browser every update you made using javascript is temporary and non-persistent

answered Aug 12, 2018 at 13:01

Anandhu

8271 gold badge10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hortig · Accepted Answer · 2018-08-12 13:05:18Z

1

If i understand correctly, you want to replace the "Mytext" on a buttonpress, and than save the new file on with the replaced text on your server?

first of all you can replace the "Mytext" simply by adding newText.innerHTML="new text here" in the place where you have the command (https://www.w3schools.com/jsref/prop_html_innerhtml.asp)

but now you cannot save it with only javascript, and just sending the whole page to you server and save it there as an .html will be a terrible idea (never trust user input, and if you are gonna send whole .html files on your server which has been manipulated on somebodies else computer...)

My suggestion would be(but it depends what you want to use it for): Use SQL to keep track of which user saved what. And while generating the page with PHP check if the user has saved before.

answered Aug 12, 2018 at 13:05

hortig

704 bronze badges

2 Comments

KunLun Over a year ago

This is what I want, but the html file is not on server. It is on my cloud.

hortig Over a year ago

it still can be dangerous. for example: i can create a .php file which will delete all files [link] (w3schools.com/php/func_filesystem_unlink.asp). trick the browser in sending it and then request it the normal way again. upon requestion it will execute that function and delete everything.

Muhammed Ali Can · Accepted Answer · 2018-08-12 13:16:56Z

If you have to do this without a server side code, and only with javascript, I'd suggest window.sessionStorage. Although I would not recommend this, for the sake of your learning process, you can do it like this:

<script>

this.onload = function() { // You can either use this/window.onload, as we are selecting some element from DOM or place this script at the bottom of your body
  var newText = document.getElementById("textArea");
  var btn = document.getElementById("saveBtn");

  // First check if anything is saved, if so alter the innerHTML accordingly
  if (sessionStorage.getItem("isSaved")) {
    newText.innerHTML = "newText";
  }

  // Assign a function to the button to set the session then change innerHTML
  btn.onclick = function() {
    sessionStorage.setItem("isSaved", true);
    newText.innerHTML = "newText";
  }
}

</script>

<button id = 'saveBtn'>Save</button>

<br>

<textarea id='textArea'>MyText</textarea>

Collectives™ on Stack Overflow

Rewrite HTML file using only JavaScript in header

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related