CODEWITHSUNDEEP
javascript
learner
learner

Reputation: 177

difference between addEventListener in js file and in script tag inside html page

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Understanding File upload and File access Javascript</title>
</head>
<body>
    <input type = "file" id = "files" name = "files[]" multiple></input>
    <output id = "list"></output>

<script>
  function handleFileSelect(evt){
    var files = evt.target.files;
    var output = [];
    for(var i = 0, f; f = files[i]; i++){
        output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a',') - ',
                    f.size, 'bytes, last modified: ',
                    f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                     '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>   
</body>
</html>

This example works perfectly and no errors. I get a error TypeError: document.getElementById(...) is null if I call the javascript function from a js file. This code is below.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Understanding File upload and File access Javascript</title>
    <script src = "fileaccess.js" type = "text/javascript"></script>
</head>
<body>
    <input type = "file" id = "files" name = "files[]" multiple></input>
    <output id = "list"></output>
</body>
</html>

index.js

function handleFileSelect(evt){
    var files = evt.target.files;
    var output = [];
    for(var i = 0, f; f = files[i]; i++){
        output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a',') - ',
                    f.size, 'bytes, last modified: ',
                    f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                     '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);

Now, what is the difference these both examples. I dont understand why I'm getting error if I'm calling the javascript function in a html page.

Upvotes: 0

Views: 2247

Answers (1)

adeneo
adeneo

Reputation: 318162

The difference is the placement of the script.
In the first example the script tag is after the elements in the DOM, and in the second example the script tag is in the head, before the elements in the DOM.

To be able to get an element with .getElementById and any other such method, the element must first be loaded, meaning the script must come after the element in the DOM, or the script needs to use an event handler to wait for the page to be loaded, such as window.onload, DOMContentLoaded etc.

<!DOCTYPE html>
<html>
<head>
    <title>Understanding File upload and File access Javascript</title>
</head>
<body>
    <input type = "file" id = "files" name = "files[]" multiple></input>
    <output id = "list"></output>
    <script src = "fileaccess.js" type = "text/javascript"></script>
</body>
</html>

Upvotes: 1

Related Questions