Hiding the function $ console error?

Question

function $(e){return document.querySelector(e)}

I use this as a shorthand for querySelector.

For example: $('.MainClass').style.display='none';

It actually works too, but Chromes Console logger shows an error:

 Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '[object HTMLDocument]' is not a valid selector.

Which is weird, because when using $('cssslectorhere') it still works. The reason I did this because I was so used to jQuery, that I liked the $ symbol. But I hate seeing that error in the console log, anyway to remove it?

score 4 · Accepted Answer · answered Jan 27 '15 at 01:00

4

You have not provided all of the code. Somewhere, you're doing this:

$(document)

This works in jQuery, but it will not work with querySelector because it isn't a selector.

Either remove that usage, or change your $ function to handle document.

function $(e){
    return e === document ? document : document.querySelector(e);
}

answered Jan 27 '15 at 01:00

Alexis King

43,109
15
131
205

Wow! I had `$( document ).ajaxStart(function() ` Scrabbled away in my code. I just did a ctr+f and found it. Removed it, and all is good. Thank you Alexis and sorry for such a embarrassing mistake! – NiCk Newman Jan 27 '15 at 01:04

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

It sounds like your code is somewhere trying to pass the document object instead of a string selector as in $(document). You could work around that by changing your code to this:

function $(e){
    if (typeof e === "string") {
        return document.querySelector(e);
    } else {
        return e;
    }
}

Then, this would work with any DOM object that you passed such as document or document.body.

Or, you could make it a quite a bit more foolproof:

//Returns true if it is a DOM node
function isNode(o){
  return (
    typeof Node === "object" ? o instanceof Node : 
    o && typeof o === "object" && typeof o.nodeType === "number" && typeof o.nodeName==="string"
  );
}

function $(e) {
    if (typeof e === "string") {
        return document.querySelector(e);
    } else if isNode(e) {
        return e;
    } else {
        throw new Error("arg in $(arg) must be selector string or DOM node");
    }
}

See this prior answer for a discussion/reference for the isNode() function.

edited May 23 '17 at 12:20

Community

1
1

answered Jan 27 '15 at 01:01

jfriend00

683,504
96
985
979

Thanks jfriend, but it looks like I just had a strangly $(document) floating in my code, appreciate your time though. – NiCk Newman Jan 27 '15 at 01:11
With my code, it would have given you an error about no method named `.ajaxSetup()` and would have indicated the line number of the exception and it would have been easy to see what was wrong. I think you'd be better off with more robust error detection and handling in such an often used function. – jfriend00 Jan 27 '15 at 01:18
Completely reasonable, I'll use your code too. But I already accepted Alexis's as the right answer. I hope it's not a sin to use your code, but mark her's as a correct answer! Haha, appreciate it. Have a wonderful night :) – NiCk Newman Jan 27 '15 at 01:19
@NiCkNewman - you should select which ever answer you think is the "best" and "most helpful" answer - that's what the green checkmark is for here on SO. Since answers or understanding can change with time, you are always free to change your mind about which answer is the best answer. Feel free to use the code - that's what it's there for. When you've earned some more reputation points, you can also upvote all helpful answers, not only select the best one. – jfriend00 Jan 27 '15 at 01:22

Hiding the function $ console error?

2 Answers2