Call javascript class method from another method

Question

I have problem calling one method from another method in a Javascript class.

Here is the code

 function Spinner( max_value , min_value , div_id ){
 var MAX_VALUE = 25;
 var MIN_VALUE = -25;
 var DEFAULT_VALUE = 0;
 this.maxValue = max_value;
 this.minValue = min_value;
 this.divId = div_id;
 this.spinnerControl; //spinner control object that is populated in getSpinner() method.
 this.rotateSpinner = function (spinnerTextBoxId,up) {
 document.getElementById(spinnerTextBoxId).value = up ? parseInt(document
 .getElementById(spinnerTextBoxId).value) + 1 : parseInt(document
 .getElementById(spinnerTextBoxId).value) - 1;
 };
 this.getSpinner = function( ){
 spinnerControl = $('<input type="text"></input>')
 .attr('id' , 'spinner')
 .attr('val' , DEFAULT_VALUE)
 .add( $('<ul></ul>')
 .addClass("spinner")
 .append(
 $('<li></li>')
 .append($('<input type="button"></input>') 
 .attr({
 id : 'upButton',
 value : '&#9650;'
 }).appendTo( $('<li></li>') )
 ) 
 ).append( $('<li></li>')
 .append($('<input type="button"></input>') 
 .attr({
 id : 'downButton',
 value : '&#9660;'
 }).appendTo( $('<li></li>') )
 )
 ) 
 );
 var timeoutId = 0;
 $('#upButton' , spinnerControl).mousedown(function() {
 console.log('mouse down');
 timeoutId = setInterval(this.rotateSpinner('spinner' , true ) , 200);
 }).bind('mouseup mouseleave', function() {
 console.log('mouse left');
 //clearTimeout(timeoutId);
 });
// $('#downButton').mousedown(function() {
// alert('herer');
// //timeoutId = setInterval("rotateSpinner('spinner' , false ) ", 200);
// }).bind('mouseup mouseleave', function() {
// clearTimeout(timeoutId);
// });
 return spinnerControl;
 };
//class END 
}

In this js file ,the error shows up in firebug : "Reference error : rotateSpinner" is not defined.

Why is it appearing ?

• Naveen Kumar Alone: stackoverflow.com/questions/2233710/…
• Taha Iqbal: I had already seen the post but haven't figure out the problem yet, rotateSpinner is not called. I haven't used new operator as suggested in that question.
• Devang Rathod: try to define rotateSpinner variable to outside of function as a gloabl variable.

Answer 1

this is referring the DOM-element, which in this case is the '#upButton'. If you add a variable that points to the class, you can then refer to this one instead of this when defining functions within the method.

function Spinner( max_value , min_value , div_id ){
var MAX_VALUE = 25;
var MIN_VALUE = -25;
var DEFAULT_VALUE = 0;
this.maxValue = max_value;
this.minValue = min_value;
this.divId = div_id;
this.spinnerControl; //spinner control object that is populated in getSpinner() method.
this.rotateSpinner = function (spinnerTextBoxId,up) {
 document.getElementById(spinnerTextBoxId).value = up ? parseInt(document
 .getElementById(spinnerTextBoxId).value) + 1 : parseInt(document
 .getElementById(spinnerTextBoxId).value) - 1;
};
this.getSpinner = function( ){
 var self = this;
 spinnerControl = $('<input type="text"></input>')
 .attr('id' , 'spinner')
 .attr('val' , DEFAULT_VALUE)
 .add( $('<ul></ul>')
 .addClass("spinner")
 .append(
 $('<li></li>')
 .append($('<input type="button"></input>') 
 .attr({
 id : 'upButton',
 value : '&#9650;'
 }).appendTo( $('<li></li>') )
 ) 
 ).append( $('<li></li>')
 .append($('<input type="button"></input>') 
 .attr({
 id : 'downButton',
 value : '&#9660;'
 }).appendTo( $('<li></li>') )
 )
 ) 
 );
 var timeoutId = 0;
 $('#upButton' , spinnerControl).mousedown(function() {
 console.log('mouse down');
 timeoutId = setInterval(self.rotateSpinner('spinner' , true ) , 200);
 }).bind('mouseup mouseleave', function() {
 console.log('mouse left');
 //clearTimeout(timeoutId);
 });
// $('#downButton').mousedown(function() {
// alert('herer');
// //timeoutId = setInterval("rotateSpinner('spinner' , false ) ", 200);
// }).bind('mouseup mouseleave', function() {
// clearTimeout(timeoutId);
// });
 return spinnerControl;
};
//class END 
}

• Blue Smith: Agree with this :). One best practice is that we can assign a variable var that = this.

Answer 2

Depends on how you call this function.

If you call it like this:

Spinner().rotateSpinner(arg1, arg2);

You would the error you mentioned.

The right usage is:

new Spinner().rotateSpinner(arg1, arg2);

It's better you learn more about variable scope of javascript.

• Taha Iqbal: It worked with new Spinner().rotateSpinner(,) approach. So it means there is not concept of private methods or calling methods from inside methods in javascript ?? I think of it is simply a method declared and call it from another method. But getting it called from object reference is strange to me .
• Adam: @TahaIqbal Yes, you can call other methods from other methods. But in your case you are calling the method of a dom-element and not your class. Look at my answer below
• Howard: It is about who the caller is!? If you call it like "Spinner().rotateSpinner(arg1, arg2);", which means the caller is "window", so the script engine tries to find "rotateSpinner" in global env, obviously there isn't such a method in it. Then error occurs.