How do I create methods for an HTML element?

I'm trying to create a simple, small and basic javascript framework just for learning purposes. But the thing is that i'm allready stuck at the very basics.

I'm trying to do something like this:

$('testdiv').testFunction();

And the code i've written for that:

var elementID;
var smallFramework = {

  $:function(id) {
    this.elementID = id;
  },

  testFunction:function() {
    alert(this.elementID);
  }

};
window.$ = smallFramework.$;

But in return I get:

$('testdiv) is undefined

Can anyone help me with this small and hopefully easy question?

Answers


To get the behavior you're expecting, you need the $ function to return an object with a method named testFunction. Try:

var smallFramework = // an object for namespacing
{
  $:function(id) // the core function - returns an object wrapping the id
  {
    return {                    // return an object literal
      elementID: id,            // holding the id passed in
      testFunction: function()  // and a simple method
      {
         alert(this.elementID);
      }
    };
  }
};

Of course, there are many other ways to achieve the behavior you desire.


If you're trying to add methods to an HTML element you could do something along these lines.

$ = function( elementId ) {
    var element = document.getElementById( elementId );
    element.testFunction = function(){
        alert( this.id );
        return this; // for chaining
    }
    return element;
}

$('test').testFunction();

try

smallFramework.$('testdiv');

instead. According to the code you posted, that's where your $ function ended up.

or alternatively, it looks like you're trying to replicate something like jquery. You might want to try something like this.

var $ = smallFramework = (function () {
   var f = 
   {

     find:function(id) {
       f.elementID = id;
       return f;  //every function should return f, for chaining to work
     },

     testFunction:function() {
       alert(f.elementID);
       return f;
     }

   }

return f.find  //the find function will be assigned to $. 
//and also assigned to smallFramework.
//the find function returns f, so you get access to testFunction via chaining
// like $("blah").testFunction()

})() //note this function gets called immediately.

this code may look confusing to someone new to javascript, because it depends heavily on the concept of closures. I suggest that if this doesn't make sense, spend some time at Douglas Crockford's javascript website. This is important, because the code above will bite if you happen to use "this" in the find function, because "this" won't be bound to f, as you may expect it to be, when you use it from $ or smallFramework.


Need Your Help

difference between touchMoved and Swipe?

iphone ipad uigesturerecognizer uitouch

i am rotating circle in iPad.i have inserted swipegesture event.but I want to different operations in touchMoved and swipeEvent.but when I do touch moving , swipw gesture is called, what i have to ...

Improve .NET/MSSQL select & update performance

c# .net sql-server performance

I'd like to increase performance of very simple select and update queries of .NET & MSSQL 2k8.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.