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
– Barmar

2014-07-29 07:42:23 +00:00
Commented Jul 29, 2014 at 7:42 — Barmar
– Barmar, Commented Jul 29, 2014 at 7:42

Valentin Mercier · Accepted Answer · 2014-07-29 07:42:26Z

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, 2014 at 7:42

Valentin Mercier

5,3564 gold badges28 silver badges51 bronze badges

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

7 Comments

Barmar Over a year ago

Or #2 could use getElementsByTagName.

mplungjan Over a year ago

document.getElementsByTagName("main")[0]

John Dvorak Over a year ago

is main even a valid tag in HTML5?

Jukka K. Korpela Over a year ago

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.

Mihira Over a year ago

Cheers Valentin - I completely missed that.

|

Jonathon · Accepted Answer · 2014-07-29 07:37:36Z

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, 2014 at 7:37

Jonathon

16.4k12 gold badges78 silver badges98 bronze badges

1 Comment

Barmar Over a year ago

That doesn't seem related to the error he's getting. He never tries to read property 0 of el.

Community · Accepted Answer · 2017-05-23 11:50:21Z

0

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]);
  }

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Jul 29, 2014 at 8:10

pappu_kutty

2,5188 gold badges56 silver badges99 bronze badges

Collectives™ on Stack Overflow

getElementById returning null value

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related