javascript and jshint, undefined

Question

Today I wrote this code:

(function (window) {
    'use strict';

    function ViewPort() {
        var getSize = function () {
                var e = window,
                    a = 'inner';

                if (!('innerWidth' in window)) {
                    a = 'client';
                    e = Document.documentElement || Document.body;
                }
                return { width : e[a + 'Width'], height : e[a + 'Height'] };
            },

            update = function () {
                var vw = (getSize().width / 100);

                Document.querySelector('html').style.fontSize = vw + 'px';
            };

        Document.addEventListener("resize", update());
    }

    function run() {
        return new ViewPort();
    }

    window.viewport = run;
}(window));

window.onload = function () {
    'use strict';
    viewport();
};

When I use jshint then I got errors like this:

11  'Document' is not defined. (W117)   e = Document.documentElement || Document.body;
19  'Document' is not defined. (W117)   Document.querySelector('html').style.fontSize = vw + 'px';
22  'Document' is not defined. (W117)   Document.addEventListener("resize", update());
30  'window' is not defined. (W117) }(window));
32  'window' is not defined. (W117) window.onload = function () {
34  'viewport' is not defined. (W117)   viewport();

any one can help me fix my errors? I dont have any idea how to fix it, This code I have in scripts.js file not inline.

Answer 1

Javascript is case sensitive. document is all lowercase. It should work, then.

If that still doesn't work, you could try adding a directive to the start of your file to imply that the script is meant for the browser, and the browser globals are available.

Add this comment to the top of your script:

/* jshint browser: true */