javascript for-loop not picking up id value

Question

Consider that I have 10 input boxes, (using datepicker plugin Fyi)

I have a specific set of requirements for when the input box is clicked, or the plux/minus divs are hit too (to show/hide the 10 boxes as needed).

This loop doesn't seem to pick up the x and y variables.

the alert I have always echos 6 for example.. NO idea why..

here's my loop... and ideas why x and y don't seem to be set?

for (var x = 1; x <= 10; x++) {
    var y = x+1;
    $('#date_start'+y).attr("disabled", "disabled");
    $('#date_start'+x).datetimepicker();

    $('#date_start'+x).blur(function() {
        if (isset($('#date_start'+x).val())) {
            $('.add_time_'+x).css('visibility', 'visible');
        } else {
            $('.add_time_'+x).css('visibility', 'hidden');
            $('.rem_time_'+y).css('visibility', 'hidden');
        }
    });

    $('.add_time_'+x).click(function() {
        alert('ici: ' + y);
        $('.date_'+y).css('visibility', 'visible');
        $('#date_start'+y).removeAttr("disabled");
        $('.rem_time_'+y).css('visibility', 'visible');
    });

    $('.rem_time_'+y).click(function() {
        $('.date_'+y).css('visibility', 'hidden');
        $('#date_start'+y).attr("disabled", "disabled");
        $('#date_start'+y).val('');
        $('.rem_time_'+y).css('visibility', 'hidden');
        $('.add_time_'+y).css('visibility', 'hidden');
    });
}

=== Note, isset, is a seperate function I have to check if the field value is empty/not set When I try and echo out the value of $('#date_start'+x).val()

it echos undefined... even if the corresponding input HAS a value on screen.

Read this: http://stackoverflow.com/questions/111102/how-does-a-javascript-closure-work — sje397, Dec 13 '10 at 14:50
You are defining functions in a loop. See here http://blog.morrisjohns.com/javascript_closures_for_dummies.html Example 5. — Felix Kling, Dec 13 '10 at 14:51

Andrey · Accepted Answer · 2010-12-13T15:23:16.763

When using outside variables in event handlers, you need to wrap your closures. Lets take your example:

$('#date_start'+x).blur(function() {
        if (isset($('#date_start'+x).val())) {
            $('.add_time_'+x).css('visibility', 'visible');
        } else {
            $('.add_time_'+x).css('visibility', 'hidden');
            $('.rem_time_'+y).css('visibility', 'hidden');
        }
    });

This will always use the last value of outside variables x and y, not the value at the time of creating this event handler. What you need to do is to wrap it in an immediately executed function:

$('#date_start'+x).blur((function(xlocal, ylocal) {
        return function() {
            if (isset($('#date_start'+xlocal).val())) {
                $('.add_time_'+xlocal).css('visibility', 'visible');
            } else {
                $('.add_time_'+xlocal).css('visibility', 'hidden');
                $('.rem_time_'+ylocal).css('visibility', 'hidden');
            }
        }
    })(x,y));

To be precise, the code already contains closures. You wrap them in an immediate function to "capture" the values. — Felix Kling, Dec 13 '10 at 15:04

javascript for-loop not picking up id value

1 Answers1