How can i read a .txt file using javascript and use its content in HTML

Question

I have a button in HTML, and when i press it I want to change the content of a P tag using javascript. The content is in a .txt file (called "myText1.txt" in the same folder as my html file). How can i take that content and save it in a var called fileText, so i can just use document.getElementById("txt_nombre").innerHTML = fileText;

<button id="btn_change" onclick="changeTxt()">OK</button>
<br>
<p id="content"></p>

<script>

function changeTxt() {
    var fileText;
    document.getElementById("content").innerHTML = fileText;
}

</script>

</body>

If I understand your question correctly, you cannot do that. Your javascript runs on the client machine whereas your text file in in the server. javascript cannot read file directly from server, unless you use ajax to get the content from the server. — bansi, Aug 13 '18 at 03:15
This might possibly help https://stackoverflow.com/questions/14446447/how-to-read-a-local-text-file. — Anh Pham, Aug 13 '18 at 03:26

score 1 · Answer 1 · answered Aug 13 '18 at 04:41

1

A different approach without AJAX, not sure if it works in your case.

Your text file contents be like (file name can be content.txt or content.js whatever)

var fileText = "Some text. Lorem ipsum";

Add this file via script tag to your page

<script type="text/javascript" src="content.txt"></script>

In your button click function use the below code

document.getElementById("txt_nombre").innerHTML = fileText;

answered Aug 13 '18 at 04:41

kiranvj

32,342
7
71
76

you should also hilight that for this to work, the file must be of format `var foo = ..`, so a javascript file - it will not work with a regular text file that can't be changed into javascript format. – eis Aug 13 '18 at 04:43
@eis .txt files should work right? I have used similar approach with .php files with JavaScript contents. – kiranvj Aug 13 '18 at 04:49
Yes. As @eis mentioned the file should have valid JavaScript contents with correct syntax. – kiranvj Aug 13 '18 at 04:51

score 0 · Answer 2 · answered Aug 13 '18 at 03:49

You should be able to do this with AJAX. The following is modified from the linked article

<button id="btn_change">OK</button>
<br>
<p id="content"></p>

<script>

(function() {
   var httpRequest;
   //Set an event listener on your button
   document.getElementById("btn_change").addEventListener('click', makeRequest);

   function makeRequest() {
      httpRequest = new XMLHttpRequest();

      if (!httpRequest) {
          alert('Giving up :( Cannot create an XMLHTTP instance');
          return false;
      }

      httpRequest.onreadystatechange = setContents;
      //Open then send the request to your page
      httpRequest.open('GET', 'myText1.txt');
      httpRequest.send();
   }

   function setContents() {
     if (httpRequest.readyState === XMLHttpRequest.DONE) {
       if (httpRequest.status === 200) {
        //Set the contents of your p tag
         document.getElementById("content").innerHTML = httpRequest.responseText;
       } else {
         alert('There was a problem with the request.');
       }
    }
 }
})();    
</script>    
</body>

This is a simple example only. Error handling and alerts should be modified to fit your needs. Also note there a quite a few libraries out there that can simplify the AJAX work flow.

How can i read a .txt file using javascript and use its content in HTML

2 Answers2