I’ve found that using JSLint to imform me of any obvious problems helps a lot, to the point where I have my code editor tell me about all linting problems as I write the code, so that I can fix it right there and then.
Here’s what it has to say about things, where I’ve used comments in the code sections to show the old previous line of code before it was updated.
Use double quotes, not single quotes.
The main reason for using double quotes is that when there’s both single and double quotes that can be used, it’s better to settle on one of them for the sale of consistency. Because we’re not supposed to use HTML code in our JavaScript, and double quotes let you more easily use words such as “you’re” and “it’s”, double quotes are the standard that has been set.
If you look at jQuery’s attribute equals selector documentation page, you’ll also see that double quotes are used, with single quotes inside.
// $('#btnSubmit').click(function(){
$("#btnSubmit").click(function(){
...
// $('input[type="checkbox"]:checked').each(function() {
$("input[type='checkbox']:checked").each(function() {
...
// if (this_input.is(':checked')){
if (this_input.is(":checked")){
...
// $('#divResult').html(resultString);
$("#divResult").html(resultString);
Unexpected ‘this’.
The this keyword ends up becoming confusing because it can frequently change meaning. As a result, using properly named variable helps to prevent that confusion.
// $("input[type='checkbox']:checked").each(function() {
$("input[type='checkbox']:checked").each(function(ignore, input) {
// var this_input = $(this);
// if (this_input.is(":checked")){
if (input.is(":checked")){
// resultString += [StatJSON.$(this).val()];
resultString += [StatJSON.$(input).val()];
Bad property name ‘$’.
resultString += [StatJSON.$(input).val()];
Here, StatJSON is the object and you are attempting to use a property accessor. When using dot notation the property must be a valid identifier contains alphanumerics. $(input).val() is not a valid identifier.
Instead of using dot notation, you need to use bracket notation instead.
// resultString += [StatJSON.$(input).val()];
resultString += StatJSON[$(input).val()];
Expected ‘)’ to match ‘(’ from line 15 and instead saw ‘}’.
Here’s line 15, and line 21 on which the error occurred.
$("input[type='checkbox']:checked").each(function(ignore, input) {
...
});
Nothing seems to be wrong there, so it helps to look at the line inside of them too.
$("input[type='checkbox']:checked").each(function(ignore, input) {
if (input.is(":checked")){
resultString += StatJSON[$(input).val()];
}
$("#divResult").html(resultString);
}
});
The if statement has a starting and a closing brace, which can be ignored for the purpose of investigating the problem.
There is a single closing brace below the divResult line, that doesn’t seem to have a matching starting brace.
It seems that you haven’t properly closed the each statement, which needs to be }); instead of just }
That is confirmed by checking the other }); lines which appropriately close off the click event and the document ready lines respectively.
We can just correct the single closing brace line so that it properly closes the each statement.
// }
});
});
Undeclared ‘$’.
JSLint must be told about global variable, so we declare them at the top of the code.
/*global $ */
...
/*global*/ requires the Assume a browser option.
Let’s do that.
/*jslint browser */
/*global $ */
...
Undeclared ‘resultString’.
$("#btnSubmit").click(function(){
...
resultString += StatJSON[$(input).val()];
As there is no var declaration, resultString is being defined as a global variable.
You can prevent that by declaring it in the each function.
$("#btnSubmit").click(function(){
var resultString = "";
...
resultString += StatJSON[$(input).val()];
Expected ‘$’ at column 0, not column 4.
We now have a lot of code indentation issues, for which the best solution is to use the Online JavaScript Beautifier where after beautifying the code, we can copy and paste it back into JSLint.
Expected one space between ‘function’ and ‘(’.
$(document).ready(function() {
Beautifying the code also helps to find unnamed anonymous functions.
While it’s possible to “fix” this by adding a space, it’s better if we properly name our functions.
We don’t have to use the ready method either. Instead, we can use the recommended way instead of just passing a function to the jQuery object.
// $(document).ready(function() {
$(function ready() {
Expected one space between ‘function’ and ‘(’.
We should name this click function too.
// $("#btnSubmit").click(function() {
$("#btnSubmit").click(function showCheckedValues() {
Expected one space between ‘function’ and ‘(’.
We should name this each function too
// $("input[type='checkbox']:checked").each(function addEachValue(ignore, input) {
$("input[type='checkbox']:checked").each(function addValue(ignore, input) {
Line is longer than 80 characters.
The line is too long now though, so we should either break the line after the each parenthesis, or assign the checked fields to an appropriate value. I’ll choose the latter.
// $("input[type='checkbox']:checked").each(function addValue(ignore, input) {
var $checked = $("input[type='checkbox']:checked");
$checked.each(function addValue(ignore, input) {
And JSLint now likes the code. You should find that it now works a lot better than it did before.
