Get variable from loop

Question

I have a loop which is creating table:

for(m=1; m<7; m++){

    document.getElementById('content').innerHTML += 
        ('<tr>' +
            '<td>' + m + '</td>' + 
            '<td><input type="checkbox" id="switch'+m+'"><label class="switch" for="switch'+m+'">Button ' + m + '</label></td>' +
        '</tr>')
}

In every row in second TD is button which must be assigned to every row. Each button has his own row. I want to alert m from the first TD exactly when i click button from that row. I mean if i will click button is switch2 i will get alert from m "2". Here is the button code i tried:

var buttons = "#switch" + m

$(function() {
    $(buttons).button();
    $(buttons).click(function(){                        
        alert(m);                                   
    });
});

This is not working because all of the buttons alerting last value from loop = 6. I know it is confused but i hope you uderstand. Really appreciate your help

possible duplicate of [Javascript closure inside loops - simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Felix Kling, Apr 01 '14 at 15:47

score 1 · Accepted Answer · answered Apr 01 '14 at 14:59

Change it to this:

$(function() {
    var localM = m;
    $(buttons).button();
    $(buttons).click(function(){                        
        alert(localM);                                   
    });
});

The problem is the alert binds to the variable m not the value of m. By allocating a local variable inside the closure you capture the value of m at that point in the loop.

score 0 · Answer 2 · answered Apr 01 '14 at 14:59

you can also bind event another way, for sample

$("tr > td > input[type=checkbox]").function(e){                        
        alert(event.target.id);                                   
        //OR
        alert(this.id);                                   
});

if you can add any class attribute in element

Then this is safe

 $("tr > td > input[type=checkbox].switch").function(){                        
        alert(event.target.id);                                   
    });

score 0 · Answer 3 · answered Apr 01 '14 at 15:02

There is so many ways to do this. Here's one:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">

$(document).ready(function()
{
    // Populate Form
    for (var m = 1; m <= 7; m++)
    {
        $('#content').append('<tr>' +
            '<td>' + m + '</td>' + 
            '<td><input type="checkbox" class="clickMe" id="switch'+m+'"><label class="switch" for="switch'+m+'">Button ' + m + '</label></td>' +
        '</tr>');
    }

    // Handle Click
    $('.clickMe').click(function()
    {
        alert('You clicked on : ' + $(this).attr('id')); // alerts "switchN" e.g. switch1

        // or //

        alert('You clicked on : ' + $(this).attr('id').replace('switch', '')); // // alerts "N" e.g. 1
    });

});

</script>

<table id="content"></table>

score 0 · Answer 4 · answered Apr 01 '14 at 15:03

Here's a bit of a refactor (minus the button() plugin):

var $content = $('#content');
for (var m = 1; m < 7; m++) {
    $content.append(
        '<tr>' +
            '<td>' + m + '</td>' +
            '<td>' +
                '<input type="checkbox" id="switch' + m + '">' +
                '<label class="switch" data-num=' + m + ' for="switch' + m +'">Button ' + m + '</label>' +
            '</td>' +
        '</tr>'
    );
}

$('label.switch').click(function(e) {
    e.preventDefault();
    alert($(this).data('num'));
});

JSFIDDLE

Get variable from loop

4 Answers4