Javascript select element in library

Question

I am working on a javascript library that will work like this: tex("element").print("hi"). Here is the code:

(function (window) {
        var regex = {
            Id : /^[#]\w+$/,
            Class : /^[.]\w+$/,     
            Tag : /^\w+$/,
            validSelector : /^([#]\w+|[.]\w+|\w+)$/
        },  
        tex = function(selector){
            //only some of the functions need to select an element
            //EX:
            // style: tex(selector).style(style);
            //one that would not need a selector is the random number function:
            // tex().random(from,to);
            if (selector){
                if (typeof selector === 'string'){
                    var valid = regex.validSelector.test(selector);
                    if( valid ){
                        if(regex.Id.test(selector)){ 
                            this = document.getElementById(selector);
                        }
                        if(regex.Class.test(selector)){ 
                            this = document.getElementByClass(selector);
                        }
                        if(regex.Tag.test(selector)){ 
                            this = document.getElementByTagName(selector);
                        }
                    }
                }else if(typeof selector === 'object'){
                    this = selector;
                }
                //this = document.querySelector(selector);
                // I could make a selector engine byt I only need basic css selectors.
            }
        };
        tex.prototype = {
            dit : function(){
                this.innerHTML = 'Hi?!?!?!'
            }
        };
        window.tex = tex;
})(window);

When I try to run the code I get an error that says, "Left side of argument is not a reference" referring to this = document.getElementById(selector);

Does anyone know what is wrong with my code?

epascarello · Accepted Answer · 2013-10-11T13:05:38.997

Because you can not set this.

To do something that you are after, you just return this.

without using a prototype

var foo = function( selector ) {

    this.print = function () {
        console.group("in print");
        console.log(this.elements[0].innerHTML);   
        console.groupEnd("in print");
        return this;
    }

    this.printAll = function () {
        console.group("in printAll");
        for (var i=0; i<this.elements.length; i++) {
             console.log(this.elements[i].innerHTML);
        }
        console.groupEnd("in printAll");
        return this;
    }

    this.elements = document.querySelectorAll( selector );
    return this;

}

console.group("id");
foo("#foofoo").print();
console.groupEnd("id");
console.group("class");
foo(".bar").printAll().print();
console.groupEnd("class");

JSFiddle

Basic example with prototype

(function () {

    var basic = function (selector) {
        this.elements = document.querySelectorAll(selector);
        return this;
    }

    basic.prototype.print = function () {
        console.group("in print");
        console.log(this.elements[0].innerHTML);
        console.groupEnd("in print");
        return this;
    }

    basic.prototype.printAll = function () {
        console.group("in printAll");
        for (var i = 0; i < this.elements.length; i++) {
            console.log(this.elements[i].innerHTML);
        }
        console.groupEnd("in printAll");
        return this;
    }


    var foo = function (selector) {
        return new basic(selector);
    }

    window.foo = foo;

})();

console.group("id");
foo("#foofoo").print();
console.groupEnd("id");
console.group("class");
foo(".bar").printAll().print();
console.groupEnd("class");

JSFiddle

@TekiTech they add properties to this like `this.something = something`, but its a language construct. — Jay Harris, Oct 11 '13 at 12:20
I got it to work: `this.length = 1;` at the beginning and then `this[0] = document.getElementById(selector);` — , Oct 11 '13 at 12:21
Jquery does not set this in their function call, look at their code: http://stackoverflow.com/questions/8734115/how-can-jquery-behave-like-an-object-and-a-function — epascarello, Oct 11 '13 at 12:24
@TekiTech I added a basic example of chaining that does not use the prototype. It is easy enough to use a prototype if needed. — epascarello, Oct 11 '13 at 12:36

Javascript select element in library

1 Answers1