document.querySelector(…) is null error

Question

For image upload in a cakephp project I used java-script.I added this js file in app\\View\\Layouts default.ctp

js code

document.querySelector(\'in         


        

Answer 1

To make sure that your DOM is ready you could add this to your JS file.

// my-script.js
document.addEventListener("DOMContentLoaded", function() { 
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.querySelector('input[type=file]')
        .addEventListener('change', function(event){
            ...
         }
});

This way you could call your js files from wherever you like. Please take a look to this superb answer to get further insight on these matters.

Also take a look at this other Google rule.

Answer 2

I suggest writing your <script type="text/javascript" src="your js file"></script> in body, before the closing tag

Answer 3

document.querySelector() behaves similarly to the jQuery.(document).ready() method. When the DOM is ready, the selector returns the object.

I would suggest you call all JS script bottom of the page.