I recently wrote the following JavaScript code in my scripts.js file, and I’m encountering several errors when running JSHint. The code attempts to define viewport dimensions and update font size based on the screen size:
(function (global) {
'use strict';
function ViewportManager() {
var calculateSize = function () {
var env = global,
dimensionType = 'inner';
if (!('innerWidth' in global)) {
dimensionType = 'client';
env = document.documentElement || document.body;
}
return { width: env[dimensionType + 'Width'], height: env[dimensionType + 'Height'] };
},
refresh = function () {
var viewportWidth = (calculateSize().width / 100);
document.querySelector('html').style.fontSize = viewportWidth + 'px';
};
document.addEventListener("resize", refresh);
}
function initiate() {
return new ViewportManager();
}
global.viewportController = initiate;
}(window));
window.onload = function () {
'use strict';
viewportController();
};
The following errors are reported by JSHint:
11 'document' is not defined. (W117) env = document.documentElement || document.body;
19 'document' is not defined. (W117) document.querySelector('html').style.fontSize = viewportWidth + 'px';
22 'document' is not defined. (W117) document.addEventListener("resize", refresh);
30 'window' is not defined. (W117) }(window));
32 'window' is not defined. (W117) window.onload = function () {
34 'viewportController' is not defined. (W117) viewportController();
Can anyone assist me in resolving these errors? I’m unsure how to go about fixing them.
To resolve the JSHint errors you're encountering, you need to inform JSHint about the global variables used in your script. This way, JSHint won't flag them as undefined. Here is a practical solution:
- Add a JSHint directive to specify
window and document as predefined globals. This can be done by including a comment at the top of your script like so:
/* global window, document */
This tells JSHint that window and document are recognized global variables, thus preventing the undefined errors.
- For
viewportController, make sure it is defined before it is invoked or adjust your loading order accordingly. In this context, you don't need any change as your function is defined correctly within an IIFE (Immediately Invoked Function Expression), so JSHint error might just require a re-analysis after adding the directive above.
With these adjustments, your JSHint analysis should run without flagging errors for the global references:
(function (global) {
'use strict';
/* global window, document */
function ViewportManager() {
var calculateSize = function () {
var env = global,
dimensionType = 'inner';
if (!('innerWidth' in global)) {
dimensionType = 'client';
env = document.documentElement || document.body;
}
return { width: env[dimensionType + 'Width'], height: env[dimensionType + 'Height'] };
},
refresh = function () {
var viewportWidth = (calculateSize().width / 100);
document.querySelector('html').style.fontSize = viewportWidth + 'px';
};
document.addEventListener("resize", refresh);
}
function initiate() {
return new ViewportManager();
}
global.viewportController = initiate;
}(window));
window.onload = function () {
'use strict';
viewportController();
};
By following these steps, you should now have a clean JSHint response, keeping your code efficient and error-free.
To address the JSHint errors you're experiencing regarding undefined references to window, document, and viewportController, it's crucial to configure JSHint correctly so it recognizes these as global objects.
JSHint can be configured by specifying a list of acceptable global variables at the top of your script, allowing JSHint to understand that they are not undefined within the scope of your project. Here’s how you can fix these errors:
- Explicitly declare global variables by placing a JSHint configuration comment at the top of your JavaScript file:
/* global window, document, viewportController */
This informs JSHint that the variables window, document, and viewportController are defined globally, hence eliminating the warning messages.
- Ensure your code logic aligns with the environment context within which it runs. Your IIFE (Immediately Invoked Function Expression) correctly encapsulates and initialises your logic, but JSHint might still need the above global declaration to avoid false positives during analysis.
By adding the global variable directive, you provide JSHint with the instructions it needs to accurately assess your environment, therefore mitigating unnecessary warnings. With this setup, JSHint should be able to process your script without any reference errors:
/* global window, document, viewportController */
(function (global) {
'use strict';
function ViewportManager() {
var calculateSize = function () {
var env = global,
dimensionType = 'inner';
if (!('innerWidth' in global)) {
dimensionType = 'client';
env = document.documentElement || document.body;
}
return { width: env[dimensionType + 'Width'], height: env[dimensionType + 'Height'] };
},
refresh = function () {
var viewportWidth = (calculateSize().width / 100);
document.querySelector('html').style.fontSize = viewportWidth + 'px';
};
document.addEventListener("resize", refresh);
}
function initiate() {
return new ViewportManager();
}
global.viewportController = initiate;
}(window));
window.onload = function () {
'use strict';
viewportController();
};
Implementing these changes should make your script more robust, while ensuring compatibility with JSHint's analysis capabilities.
To resolve your JSHint errors, declare the globals to inform JSHint that they are defined elsewhere. Add this at the top of your scripts.js file:
/* global window, document, viewportController */
This should handle the 'undefined' warnings for window, document, and viewportController. Try running JSHint again after adding this line to see if it resolves the issue. Cheers!