Question

I’m having a bit of trouble with a small Javascript library that I am creating for practice that mimics jQuery and other libraries. As of now it does not work. I’m very new to Javascript and to scripting in general as I have only started teaching myself, so chances are I’m simply missing something that would be obvious to most. I have tried searching for a solution, but I have not been able to find one, so I have resorted to asking about it myself.

This is the library itself:

(function(window, undefined) {
var document = window.document
var $m = function(obj) {
if (typeof obj === "object") {
    return obj
}
else {
    return document.getElementById(obj)
}

class: function(name){
    var ele = document.getElementsByTagName('*')
    var objects = []

    for (var q = 0 ; q < ele.length ; ++q){
    if (ele[q].className === name){
        objects.push(ele[q])
    }
    }
    return objects
}

s: function(){
    return this.style
}

window.$m = $m

})(window)

A brief edit: $m is intended to be an object with methods class and s.

And this is how it is referenced in a simple test page:

<h1 class="heading" onmouseover="$m(this).s.setAttribute('text-decoration', 'underline')" onmouseout="$m(this).s.setAttribute('text-decoration', 'none')">Testing.</h1>

Another edit: I have attempted to do this, and although it throws no errors it does not work correctly. I’m a bit stumped with what exactly is not being called.

Here is the new library:

(function(window, undefined) {
    //set document to this local scope
    var document = window.document
    //create $m object
    var $m = function(obj) {
    //if it is anything but an element return itself
        if (typeof obj === "object") {
        return new init(obj);
        }
    //if it is an element return that element
        else {
        return new init(document.getElementById(obj));
        }
    }

    function init(elem){
        //set properties
        this.elem = elem;
    }

    init.prototype = {
        //return style
        sty: function() {
            return this.elem.style;
        },

            //return all objects with a certain class

        cla: function() {
        var allelem = document.getElementsByTagName('*')
        var give = []

        //gather all elements in the document and get those with matching class
            for (var q = 0 ; q < allelem.length ; ++q){
        if (allelem[q].className === this.elem.className){
            give.push(allelem[q]);
        }
        }
        //return found elements
        return give;
    }
    }
    //expose $m to global scope
    window.$m = $m;
})(window)

and an attempt to fix how it is referenced:

<h1 class="heading" id="test" onmouseover="$m(this).sty.textDecoration='underline'" onmouseout="$m(this).sty.textDecoration='none'">Testing.</h1>

Answer 1

There’s a couple of things wrong here.
First, as user1689607 says, your syntax is invalid; you want (I think) the following for the last part:

function class(name){
    var ele = document.getElementsByTagName('*')
    var objects = []

    for (var q = 0 ; q < ele.length ; ++q){
        if (ele[q].className === name){
            objects.push(ele[q])
        }
    }
    return objects
}

function s() {
    return this.style
}

This still won’t work, though, since class is a reserved word.

Furthermore, your code from further up isn’t going to allow you to do what you’re trying to do in your HTML. What you’re looking for is to create a new object containing the parameter you pass to $ as a field, with the functions you’ve defined as members.

Try the following:

function MyObjConstructor(param) {
    this.field = param;
}

MyObjConstructor.prototype = 
{
    s:function(){...}//As your S function, but replace "this" with "this.field"
    clazz:function(){...}//As your class function, but replace "this" with "this.field"
}

and finally

function $m(obj) {
    if (typeof obj === "object") {
        return new MyObjConstructor(obj);
    }
    else {
        return new MyObjConstructor(document.getElementById(obj));
    }
}

This results in each object that is passed to your $ function being wrapped, and exposing the appropriate methods. I’m not sure how jQuery does it, but this is probably a good place to start.