javascript - passing array values into a function

Question

In the script below, the console.log is returning the correct values, and both alerts fire. However, the value is coming up undefined.

Any ideas what I'm doing wrong?

jQuery(document).ready(function(){

    jQuery("#customfield_21070").attr('style','width:60px');
    jQuery("#customfield_21070").attr('disabled','disabled');

    var customfields = [
    '#customfield_11070',
    '#customfield_11071',
    '#customfield_20071',
    '#customfield_20072',   
    '#customfield_20073',
    '#customfield_20074',
    ];

    for(var i=0, len=customfields.length; i<len; i++) {
        console.log(customfields[i]);
        jQuery(customfields[i]).keyup(function(){
            alert('calculate');//FIRES
            calculateSum();
        });
    }


    function calculateSum() {

        var sum = 0;

        alert('value: ' + this.value);//UNDEFINED

        if(!isNaN(this.value) && this.value.length!=0 && this.id !== "customfield_21070") {
            sum += parseFloat(this.value);
        }

        jQuery("#customfield_21070").val(sum.toFixed(2));
    }

});

Answer 1

Use Function.prototype.call():

Calls a function with a given this value and arguments provided individually.

Its first parameter is thisArg:

The value of this provided for the call to fun. Note that this may not be the actual value seen by the method: if the method is a function in non-strict mode code, null and undefined will be replaced with the global object, and primitive values will be boxed.

So, pass this from your handler function to calculateSum like so:

jQuery(customfields[i]).keyup(function(){
    calculateSum.call(this);
});