HTML- How can I insert the contents of a .txt file into a variable to use .innerHTML to change the contents of ?

Question

Im trying to create an automated system for HTML page handling where I will be able to change the contents of a<div> inside <body> by writing into an external .txt file and uploading it to the server. Im still an early student in university and I havent learned PHP and JQuery yet. So I am trying to accomplish this by using only Javascript and HTML. I just need a way for whatever I write inside the .txt file to be written again inside the <div class="CONTENT" id="target"> which is inside the <body> automatically. Any thoughts and suggestions are greatly appreciated!

You're probably going to want to handle this in the server. Perhaps instead of rewriting the HTML file, you have your server grab all your .txt files, wrap them in
tags, then wrap the whole thing in HTML tags, and finally send that HTML as the response to the client. — JakeAve, Jan 08 '21 at 22:03

MOHAMAD MONZER · Answer 1 · 2021-01-08T22:07:51.287

0

You can solve your problem by using the FileReader. Have a look to this answer.

function readSingleFile(e) {
    var file = e.target.files[0];
    if (!file) {
        return;
    }
    var reader = new FileReader();
    reader.onload = function (e) {
        var contents = e.target.result;
        displayContents(contents);
    };
    reader.readAsText(file);
}

function displayContents(contents) {
    var element = document.getElementById('target');
    element.textContent = contents;
}

document.getElementById('file-input')
    .addEventListener('change', readSingleFile, false);

<html>

<head></head>

<body>
    <input type="file" id="file-input" />
    <h3>Contents of the file:</h3>
    <div id="target" class="CONTENT"></div>
</body>

</html>

edited Jan 08 '21 at 22:07

answered Jan 08 '21 at 21:57

MOHAMAD MONZER

41
7

A link only answer should not be an answer. It should be a comment. – Scott Marcus Jan 08 '21 at 22:02
All you've done is copied the code from the link. Still a link only answer. You haven't added anything that isn't in the link. – Scott Marcus Jan 08 '21 at 22:12
Thank you @ScottMarcus for your clarification. I can't comment with less than 50 reputations. Should I remove the response? – MOHAMAD MONZER Jan 08 '21 at 22:21
Yes, you really should. For now, focus on providing quality answers to get your reputation up. You may want to read [How to answer](https://stackoverflow.com/help/how-to-answer). – Scott Marcus Jan 08 '21 at 22:56

score 0 · Answer 2 · answered Jan 08 '21 at 22:09

You can make an AJAX call for the text file and take the response from that call and set that as the .textContent of the div. Here's an example (see comments inline):

const output = document.getElementById("output");

// Create XHR object
var xhr = new XMLHttpRequest();

// Configure the request (substitute a URL
// to the file below)
xhr.open("GET", filePathHere, false);

// Set up the callback for when the response has
// been recieved
xhr.onreadystatechange = function (){
 if(xhr.readyState === 4) {
   // Was the request successful?
   if(xhr.status === 200 || xhr.status == 0) {
     // Populate the <div> with the response text
     output.textContent = xhr.responseText;
   }
 }
}
xhr.send(null);  // Make the call

<div id="output"></div>

HTML- How can I insert the contents of a .txt file into a variable to use .innerHTML to change the contents of ?

2 Answers2