javascript - Read text file and put result to innerHTML? - Stack Overflow

时间： 2025-01-06 admin 业界

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.

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.

Share Improve this question asked 13 hours ago Devalart 632 silver badges10 bronze badges

Add a comment |

2 Answers 2

Sorted by: Reset to default 1

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:

There are really two questions here:

How do I get the contents of a text file situated next to the HTML file.
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!';
}