How can I create a JavaScript function that replaces the innerHTML of a paragraph with the contents of a text file?

Question

Let's suppose that I have 3 files: ~/html/display.html, ~/data/text.txt, and ~/js/script.js. display.html has the following body:

<body>
  <p id="textblock">text</p>
  <script src="../js/script.js">
    loadTxt("../data/text.txt", "textblock")
  </script>
</body>

and text.txt contains the single line: text line

I want to know how I can make a function loadTxt, with the signature loadTxt(path, id) in script.js that takes the contents of path's text file and replaces the innerHTML of the paragraph with the given id with said contents.

I've tried using fetch and xhtml, but I'm having trouble navigating them.

Please also let me know if my syntax is wrong in my HTML. I'm not super used to working with scripts and HTML yet.

[At least one of these will work](https://www.google.com/search?q=using+fetch+for+text+file+site:stackoverflow.com) — mplungjan, Jun 30 '20 at 18:16

score 1 · Answer 1 · answered Jun 30 '20 at 18:13

1

You can use fetch and get the response text.

function loadTxt(path, id){
    fetch(path).then(res => document.getElementById(id).innerHTML = res.text());
}

answered Jun 30 '20 at 18:13

Unmitigated

76,500
11
62
80

Dupe. For example [this](https://stackoverflow.com/questions/196498/how-do-i-load-the-contents-of-a-text-file-into-a-javascript-variable) – mplungjan Jun 30 '20 at 18:15
1

Nice answer, congratulations for 10k :) – Eklavya Jun 30 '20 at 19:36
@RiwimoHerbs Thank you. – Unmitigated Jun 30 '20 at 19:36

How can I create a JavaScript function that replaces the innerHTML of a paragraph with the contents of a text file?

1 Answers1