1

I am having difficulty getting these lines to validate using JSLint. I'm assuming (perhaps incorrectly) that they are actually valid. Here is the relevant code:

var shadowBox = $('<div/>').appendTo($(document.body));

// ...

shadowBox.css({
    left: (e.originalEvent.clientX + 10).toString() + 'px',
    top: e.originalEvent.clientY.toString() + 'px' 
});

The validation errors I am getting are:

Problem at line 492 character 22: Type confusion: function and .css: object.

shadowBox.css({

and

Problem at line 494 character 57: Type confusion: number and '+': string.

top: e.originalEvent.clientY.toString() + 'px'

I'm troubled more by the first one as that is a rather common jQuery syntax. The second seems like a false positive since I am concatenating string with string.

Thanks

EDIT

Figured out the problem:

Turns out JSLint is not happy with these two syntax patterns existing in the same document:

var $var = $('<div/>', {css: {width: '15px'}}); // ONE
$var.css({width : '20px'}); // TWO
Community
  • 1
  • 1
anthony sottile
  • 61,815
  • 15
  • 148
  • 207
  • No problems for me when I just paste your code in as-is – davin Jun 23 '11 at 13:17
  • Anthony, can you please post the entire context/scope of the code for each error. Like I said, as-is they validate fine, presumably it is the wider context that is causing the problem. – davin Jun 23 '11 at 13:26
  • Hmm... I guess I will look for something in a different context interfering. – anthony sottile Jun 23 '11 at 13:31
  • @davin : I guess I figured out the problem. I'm new to SO what do I do with this question since there is useful information contributed below but I effectively figured it out myself. – anthony sottile Jun 23 '11 at 13:44
  • 1
    upvote helpful answers (consider adding a comment to the effect of "thanks, helpful regarding ..."), but if you solved it then post the answer yourself and accept it. – davin Jun 23 '11 at 14:01

3 Answers3

3

from jslint: Type Confusion

JSLint can do type inference. It can report cases were variables and properties are used to house multiple types. The warning is Type confusion: {a} and {b}. where the {a} and {b} will be replaced with the names of types.

It is usually easy to see what caused the warning. In some cases, it can be very puzzling. In the puzzling cases, try initializing your vars with typed values. For example, if you expect that n will contain numbers, then write

var n = 0;

That should produce clearer warnings.

Type confusion is not necessarily an error, particularly in a language that provides as much type freedom as this one does. But some inconsistencies are errors, so type discipline might be something to consider adding to your programming style. Also, the fastest JavaScript engines will slow down in the presence of type confusion. To turn off these warnings, turn on the Tolerate type confusion option.

var shadowBox = $('<div/>').appendTo($(document.body));

// ...

$(shadowBox).css({
    left: String.concat(e.originalEvent.clientX + 10).toString(), 'px'),
    top: String.concat(e.originalEvent.clientY.toString(), 'px') 
});

For the second error, you can use string.concat(e.originalEvent.clientY.toString(), 'px') or just ignore the error. jslint is a tool to detect bad practices, but is far from a perfect tool.

By the way, there is a js validator better than jslint: jshint. It does not have the rules that mr. crockford likes, it has the rules to better javascript.

Rodrigo
  • 4,365
  • 3
  • 31
  • 49
2

Turns out that JSLint has increased their "type confusion" rules.

Whereas I thought type confusion was defined purely as this:

var a = 1;
var b = a + 'string';

Turns out this is also considered type confusion by Mr. Crockford (I don't particularly agree with him)

function MyObject () {
    this.top() {
        return '15px';
    }
}

var anonObject = {top: '15px'};
var myObject = new MyObject();
var testString = myObject.top();

or a much simpler example in the context of jQuery

var $b = $('<div/>').css({top: '15px'}),
    a = $b.offset().top + 15;

I was under the impression that type confusion referred solely to identifiers changing value within scope. Though Mr. Crawford seems to think:

From: Douglas Crockford

Subject: Re: JSLint Type Problems

To: "Anthony S."

Date: Thursday, June 23, 2011, 11:44 AM

You seem to be confused about what type confusion is. If you don't want to see the warnings, then you don't have to.

anthony sottile
  • 61,815
  • 15
  • 148
  • 207
0

Regarding the first, is shadowBox.css actually a function? You're calling it as though it is. EDIT: Yes, since that's a regular jQuery object, you're using .css correctly. /EDIT

Regarding the second, that looks valid to me, though you don't give any context.

Note that jslint doesn't understand valid JS very well, and I always recommend not using it.

Tamzin Blake
  • 2,594
  • 20
  • 36
  • 1
    Doesn't understand valid js well? Huh? JSLint is a **fantastic** tool, not sure what bugs you think it has, although if there are you should probably report them. Like all tools you need to know when and how to use it, but for simple syntax validation it's phenomenal. – davin Jun 23 '11 at 13:14
  • shadowBox is a jQuery object so according to this: http://api.jquery.com/css/#css2 – anthony sottile Jun 23 '11 at 13:15
  • Ah, I didn't notice that your first `shadowBox` was the same as your second. Yes, you're using `.css` correctly. – Tamzin Blake Jun 23 '11 at 13:22