Unable to get property 'addEventListener' of undefined or null reference

Question

I know the meaning of the problem, but I don't know how to solve it. This code is before the body tag :

<script>
var fileInput = document.getElementById('#fileToUpload');

    fileInput.addEventListener('change', function() 
    {
        var reader = new FileReader();

        reader.addEventListener('load', function() 
        {
            alert('Contenu du fichier "' + fileInput.files[0].name + '" :\n\n' + reader.result);
        }, false);

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

    }, false);
</script>

Followed by this:

<body>
(...)
<input class="inputToCover" id="fileToUpload" type="file" multiple />
(...)
</body>

IE10 throw me this error : Unable to get property 'addEventListener' of undefined or null reference, to the line : fileInput.addEventListener('change', function().

EDIT

Actually thanks for the answer! I fixed it, now being var fileInput = document.getElementById('fileToUpload');, but the same error is still here. Any ideas?

id is `fileToUpload` not `#fileToUpload` – cy3er Oct 14 '15 at 12:05 — cy3er, Oct 14 '15 at 12:05

score 3 · Accepted Answer · answered Oct 14 '15 at 12:26

You are trying to eat your pizza before you actually make it.

You can not reference an element before it is rendered to the page. You need to either call your script onload, on document ready, or place it after the element on the page. Typically people place the scripts right before the closing body tag.

Unable to get property 'addEventListener' of undefined or null reference

1 Answers1