JSLint Validation error "combine this with the previous var statement"

Question

JSLint Validation error "combine this with the previous var statement"

How do I combine this so I don't get JSLint Validation error? I get the validation error on the lines of code in getClassName function.

$(document).ready(function () {
'use strict';
// This function is used to calculate the date
function dateString(dateToDisplay) {

    var monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
        'July', 'August', 'September', 'October', 'November', 'December'],
        dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',
            'Friday', 'Saturday'];

// Use current date if no parameter or bad date provided
    if (dateToDisplay === undefined || !(dateToDisplay instanceof Date)) {
        dateToDisplay = new Date();
    }

    return dayNames[dateToDisplay.getDay()] + ', ' // Day of week: Sunday
        + monthNames[dateToDisplay.getMonth()] + ' ' // Name of month: July
        + dateToDisplay.getDate() + ', ' // Day of month: 20
        + dateToDisplay.getFullYear(); // Year: 1969
}


$('#safetyRecord').hide(); // hides the header with the id of safetyRecord until we are ready to display it later in the code
$('#today').text(dateString()); // changes the text in the span with the id of today to the current date using the dateString function
function getClassName(days) { // this function determines  which css style to apply to the id daysSinceLastAccident and the id message based on the number of days since last accident
    if (days >= 730) { return "great"; }
    if (days >= 180) { return "good"; }
    if (days >= 60) { return "marginal"; }
    if (days >= 14) { return "poor"; }
    if (days >= 0) { return "disaster"; }
}

$('#checkRecord').click(function () { // when the checkRecord button is clicked the number of days since last accident is calculated, storing the number in a variable.
    var userEnteredDate = new Date($('#dateOfLastAccident').val()); // variable that stores user entered date
    var today = new Date(); 
    var minutes = 1000 * 60; // calculation used to convert miliseconds to minutes
    var hours = minutes * 60; // calculation used to conver minutes into hours
    var days = hours * 24; // calculation used to convert hours to days
    var years = days * 365; // calculation used to convert days into years
    var daysSinceAccident = Math.floor((today.getTime() - userEnteredDate.getTime()) / days); // calculation used to find the difference between current date and user entered date as a whole number
    var className = getClassName(daysSinceAccident); // variable clasName finds the correct css style to apply based on daysSinceAccident
    $('#daysSinceLastAccident').text(daysSinceAccident); // replaces the content of the element with id daysSinceLastAccident with the number of days accident-free
    $('#daysSinceLastAccident').removeClass();
    $('#daysSinceLastAccident').addClass(className); // applies css class style to element with id daysSinceLastAccident

    $('#safetyRecord').show(); // Using the same timeframes, a custom message styled with the appropriate css class in the paragraph with id message is displayed.
    $('#message').removeClass(); 
    $('#message').addClass(className);
    $('#message').html(className + " is the current safety record.");
});

});

Answer 1

This error means that you have multiple var statements in some of your functions, such as:

var x = 1;
var y = 2;

JSLint wants you to combine the variable declarations in a single var statement like:

var x = 1,
    y = 2;

Answer 2

I think JSLint is referring to these few lines of your code (towards the bottom of the code you have provided):

var userEnteredDate = new Date($('#dateOfLastAccident').val()); // variable that stores user entered date
var today = new Date(); 
var minutes = 1000 * 60; // calculation used to convert miliseconds to minutes
var hours = minutes * 60; // calculation used to conver minutes into hours
var days = hours * 24; // calculation used to convert hours to days
var years = days * 365; // calculation used to convert days into years
var daysSinceAccident = Math.floor((today.getTime() - userEnteredDate.getTime()) / days); // calculation used to find the difference between current date and user entered date as a whole number
var className = getClassName(daysSinceAccident); // variable clasName finds the correct css style to apply based on daysSinceAccident

You can avoid declaring them multiple times by delimiting each variable with a comma:

var userEnteredDate = new Date($('#dateOfLastAccident').val()),
    today = new Date(),
    minutes = 1000 * 60,
    hours = minutes * 60,
    days = hours * 24,
    years = days * 36,
    daysSinceAccident = Math.floor((today.getTime() - userEnteredDate.getTime()) / days),
    className = getClassName(daysSinceAccident);