Question 420675 in Html Question posted in
Some basic documentation can be found here.

Read text file and put result to innerHTML?

I want to use JavaScript to change the text of an element with Id ‘foo’.
The text it should change to should be taken from a file titled ‘bar.txt’ (can also be any other file format, as long as I get a string from the text inside.)

The text file and the HTML containing the script are in the same directory, and are visible to the client.

Searching for my problem on Google only led me to this link, which is for uploading a file to the website and isn’t what I need.

Tags:

2

Answers


  1. 0

    There are really two questions here:

    1. How do I get the contents of a text file situated next to the HTML file.
    2. How to I update the text of an element with a given ID.

    I’ll assume you have a web server with these two files sitting next to one another:

    • my_page.html → the HTML file containing your page and script
    • my_text.txt → the text file

    This script on your HTML page will load the contents of the file:

    const response = await fetch("my_text.txt");
if (response.ok) {
   // response.text() will return a promise with the file contents
} else {
   // handle fetch failure
}

    And this will update the element:

    document.getElementById('foo').innerText = await response.text()

    Here is a complete script with some rudimentary error reporting on the page:

    const response = await fetch("my_text.txt");
if (response.ok) {
   document.getElementById('foo').innerText = await response.text();
} else {
   document.getElementById('foo').innerText = 'load failed!';
}
    Login or Signup to reply.
  2. 0

    To get the text from bar.txt you need to make a GET call using either XMLHttpRequest or fetch, whichever you prefer. Then you will need to set that text as the innerHTML property of the element you’re interested in.

    Note you will not be able to perform a GET call on your local machine without first spinning up a webserver.

    Example:

    foo.html:

    <!DOCTYPE html>
<html>
    <head>
        <title>Read from .txt</title>
    </head>
    <body>
        <p>Below is the content of the text file:</p>
        <p id="foo"></p>
        <script>
fetch("bar.txt").then((response)=>{
    return response.text();
}).then((text)=>{
    document.getElementById('foo').innerHTML = text;
});
        </script>
    </body>
</html>

    bar.txt:

    What I want for Christmas:
<ul>
<li>Candy</li>
<li>Toys</li>
<li>My two front teeth</li>
</ul>

    What the browser renders:

    What the browser renders

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search