getElementById returning null value

Question

I'm tying to read and output a text file. The Chrome console complains:

caught TypeError: Cannot read property '0' of undefined FinanceDashBoard.html:22"

Not sure what I am doing wrong ?

The code is as follows:

<html>
    <head>
       <title>Read File (via User Input selection)</title>
    </head>
<body>
    <main>
      <label>Load a text database file: <input type="file" id="txtfile" ></label>
    </main>

  <script type="text/javascript">

  var dbFileElm = document.getElementById('txtfile');

  dbFileElm.onchange =  function() {
    var filePath = dbFileElm.files[0];
    var reader = new FileReader();
    var output = ""; //placeholder for text output
    reader.onload = function (e) {
      output = e.target.result;
      displayContents(output);
      }
    reader.readAsText(filePath.files[0]);
  }   

  // Ignore code below it doesn't work yet.
  function displayContents(txt) {
    var el = document.getElementById('main'); 
    el.innerHTML = txt; //display output in DOM
  }

  </script>
 </body>
</html>

Which line is the error happening on? – Barmar Jul 29 '14 at 07:42 — Barmar, Jul 29 '14 at 07:42

score 7 · Accepted Answer · answered Jul 29 '14 at 07:42

7

Two mistakes.

1) Change this line:

reader.readAsText(filePath.files[0]);

to this:

reader.readAsText(filePath);

Because filePath is already: dbFileElm.files[0];

2) The main tag has no ID, so getting element by ID main will not work. Just edit it to:

<main id="main">

answered Jul 29 '14 at 07:42

Valentin Mercier

5,256
3
26
50

1

Or #2 could use `getElementsByTagName`. – Barmar Jul 29 '14 at 07:44
`document.getElementsByTagName("main")[0]` – mplungjan Jul 29 '14 at 07:44
is `main` even a valid tag in HTML5? – John Dvorak Jul 29 '14 at 07:44
`main` is valid in HTML5 according to the current W3C HTML5 LC. But this is not relevant here; its being or not being valid does not affect what browsers do. – Jukka K. Korpela Jul 29 '14 at 07:53
Cheers Valentin - I completely missed that. – Mihira Jul 30 '14 at 08:15
btw, the chick in the profile pic is cruel and funny at the same time – Mihira Jul 30 '14 at 08:23
Thanks:) Lol yap this was a test a friend suggested me to do and it works :P – Valentin Mercier Jul 30 '14 at 08:25

score 3 · Answer 2 · answered Jul 29 '14 at 07:37

3

You have no elements that have id="main"

Try something like...

<main id="main"> ...

Or if you're trying to populate your text box...

var el = document.getElementById('txtfile');

answered Jul 29 '14 at 07:37

Jonathon

15,873
11
73
92

That doesn't seem related to the error he's getting. He never tries to read property `0` of `el`. – Barmar Jul 29 '14 at 07:40

score 0 · Answer 3 · edited May 23 '17 at 11:50

this post has answer to question

HTML input file selection event not firing upon selecting the same file

and if you set your input value to null, is working for me

dbFileElm.onChange =  function() {
    this.value = null;
    var filePath = dbFileElm.files[0];
    var reader = new FileReader();
    var output = ""; //placeholder for text output
    reader.onload = function (e) {
      output = e.target.result;
      displayContents(output);
      }
    reader.readAsText(filePath.files[0]);
  }

getElementById returning null value

3 Answers3