How to display text from a textfile in html with javascript

Question

I want to use a text file as source for the text on my website. I just can't display it where I want it to be

I have already managed to read the text from the file, but now I'm stuck.

This is my readFile function:

<script>
  function readFile(input){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var textFileText = searchFile(this.responseText, input);
        document.getElementById(input).innerHTML = this.textFileText;
      }
    };
    xhttp.open("GET", textFile, true);
    xhttp.send();
  }
</script>

I've tried it out and it works.

This is the searchFile function:

<script>
  function searchFile(text, searched){
    var output;
    var n = text.search(searched);
    output = text.substr((n+str.length+2), text.indexOf('\n'));
    return output;
  }
</script>

It's supposed to filter the text in the file for a specific word.

The text file looks like this:

[header]=text
[thing1]=more text

My idea is that if I call the function like this:

readFile("thing1");

The output should be "more text"

Here I call the function to display the header Text:

<h2 onload = "readFile(this.id)" id = "header"></h2>

But then nothing gets displayed.

I've also tried this:

<h2 onload = "readFile('header')" id = "header"></h2>

But again nothing is displayed.

Am I missing something or did I do something wrong?

append a <p> tag as a child of the header element with the text you want inside of the <p> tag. — Train
– Train, Commented Jun 11, 2019 at 17:05
Why not use a json file, read it and parse the data to a JS object? Much simpler and elegant solution. — iamdlm
– iamdlm, Commented Jun 11, 2019 at 17:10

imvain2 · Accepted Answer · 2019-06-11 17:22:22Z

1

There is no onload for h2 or most tags for that matter. So instead of calling the function from the onload, I would simply call the function from within script tags on the page.

<script>readFile('header');</script>

answered Jun 11, 2019 at 17:22

imvain2

15.9k1 gold badge19 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

maswerdna · Accepted Answer · 2019-06-11 17:18:11Z

0

The only error I detected in your code is the misuse of variable =>

<script>
  function searchFile(text, searched){
    var output;
    var n = text.search(searched);
    //output = text.substr((n+str.length+2), text.indexOf('\n'));
    output =  text.substr((n+searched.length+2), text.indexOf('\n'));
    return output;
  }
</script>

answered Jun 11, 2019 at 17:18

maswerdna

3152 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to display text from a textfile in html with javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related