Question: I have a small html file that is supposed to display the contents of a text file onto the screen. The text (values.txt) is in the same file as the html file. It appears that when it reads the contents it doesn't get the values as they don't appear in the alert.

here is the code

```
<html>
<head>
<!--<input type="file" id="fileinput" />-->
<script type="text/javascript">

  function readSingleFile(file) {
    var f = new File([""], "filename.txt", {type: "text/plain"})
    if (f) {
      var r = new FileReader();
      r.onload = function(e) { 
          var contents = e.target.result;             
          var ct = r.result;
          var words = ct.split(' ');            
          alert(words[0] + 'test'); //this alert goes off but no values from words[0] are displayed
      }
      r.readAsText(f);
    } else { 
      alert("Failed to load file");
    }
  }

  //readSingleFile('values.txt');
</script>
</head>
<body onload="readSingleFile('values.txt')">
</body>
</html>

```

what can I do in order to read a text file into a list / get this code snippet to work?

Answer: 
The main problem is that first of all you need to get the file for your function. Just passing the file's name as argument is not enough. 

Also is better to use an input of type file instead body with an onload attribute.

I've refactored your code in order to get it works.

**1.** Use this on your Html and delete body onload attribute.

```
<input id="inp" type="file" />">

```

2. Add this function to an external js file or wrap it between script tag inside your html file.

```

    function readSingleFile(evt) {
    var f = evt.target.files[0]; 
    if (f) {
     var r = new FileReader();
       r.onload = function(e) { 
       var contents = e.target.result;
        alert( "Got the file.n" 
         +"name: " + f.name + "n"
         +"type: " + f.type + "n"
         +"size: " + f.size + " bytesn"
         + "starts with: " + contents.substr(1, contents.indexOf("n"))
        );  
      }
      r.readAsText(f);
     } else { 
      alert("Failed to load file");
     }
    }
    // this parts gets the file and keeps an eye for changes
    document.getElementById('inp').addEventListener('change', readSingleFile,false);

```

I hope you may find this useful.
Unfortunately I did'nt get it to work with your approach either. As *Antonio682* suggested, it would be better to do it with an `input`-field, but you may aswell try it with an ajax-call :

```
<html>
<head>
<!--<input type="file" id="fileinput" />-->
<script type="text/javascript">

      function readSingleFile(file) {
        var objXMLhttp = new XMLHttpRequest()
        objXMLhttp.open("GET", file, true);
        objXMLhttp.send();
        objXMLhttp.onreadystatechange = function(){
              if (objXMLhttp.readyState == 4){
                if(objXMLhttp.status == 200) {
                    var arrContents = objXMLhttp.responseText.split("\n"); 
                    console.log(arrContents);
                } else {
                    console.log("error");
                }
            }
        }
      }
</script>
</head>
<body onload="readSingleFile('values.txt')">
</body>
</html>

```

You might want to test it with Firefox, since Chromes security settings dont allow file-protocol requests.

You can read more about ajax calls [here](https://developer.mozilla.org/de/docs/Web/API/XMLHttpRequest)