How do you use Javascript constructor methods in a jQuery statement?

Question

I can't figure out how to use a Javascript constructor method in a jQuery .click method. I'm trying to get a button's function to change dynamically based on a constructor. Here's the set up:

<button onclick="">
</button>

needs to call a method that changes depending on another button. The following is my broken code:

    function GloveMode (name , array) {

        this.colorArray = array;

        this.displaySettings = function(){

            //Title
            $("#displayTitle").text(this.name);
            //Display Color Set
            $("#displayColors").empty();


            //Totally Broken
            $("#upArrow").click( function(){

                addColor();

            }); 

        };

        this.addColor = function(){

            console.log(this.colorArray.length);

        };
    };

I can't figure out how to get $("#upArrow").click() to call this.colorArray properly, or how to call this.addColor() in the .click() method! Please help.

Answer 1

Your Problem is that "this" means something different in each function body. So save the wanted "this" to a variable e.g. "self" and use that.

function GloveMode (name , array) 
{
    var self = this;
    this.colorArray = array;
    this.displaySettings = function()
    {
      //Title
      $("#displayTitle").text(this.name);
      //Display Color Set

      $("#displayColors").empty();

      //Totally Broken
      $("#upArrow").click( function()
      {
         self.addColor();
      }); 

    };

    this.addColor = function()
    {
       console.log(self.colorArray.length);
    };
};