CODEWITHSUNDEEP
javascripthtml
KunLun
KunLun

Reputation: 3227

Rewrite HTML file using only JavaScript in header

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?

Upvotes: 1

Views: 677

Answers (3)

Muhammed Ali Can
Muhammed Ali Can

Reputation: 21

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>

Upvotes: 1

hortig
hortig

Reputation: 70

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.

Upvotes: 1

Anandhu
Anandhu

Reputation: 827

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

Upvotes: 2

Related Questions