For loop + Button use in For loop

Question

For loop + Button use in For loop

You must Login before you can answer or comment on any questions.

Hi All, I have a for loop that creates a view with a title and a button in a table row on a Table as following

function InboxTable(section, title, startOpenBool){
var amountTasks = 10;
var tableInboxData = [];
var tableInbox = Ti.UI.createTableView({ top:'6%', objName: 'tableInbox',bottom : '12%'});
for (var i = 0; i <= amountTasks ; i++){
    var InboxRows = Ti.UI.createTableViewRow({
        objName: 'InboxRows',
        touchEnabled: true,
        height:'auto',
        bottom:'10%',
    });
    var contentBlock = Ti.UI.createView({
        height:'auto',
        top:'15%',
        layout:'Horizontal',
        bottom : '15%'
    });
    var TitleView = Ti.UI.createView({
        height:'100',
        width:'100%',
        backgroundColor:'#7A7A7A',
        width:'100%'
    });
 
    var sectionTitle = Ti.UI.createLabel({
        text: i+1 +'.'+'title',
        height: 'auto',
        textAlign:'left',
        left:'3%',
        color:'#000000',
        font:{fontSize:'30sp'}
    }); 
    var expansionButton = Ti.UI.createButton({
        width: '15%',
        top:'15%',
        height: '50%',
        right:'3%',
        open: startOpenBool
    });

And it works perfectly now the only problem is if i have a expansionButton.addEventListener('singletap', function(event){ it only works on the last button in the for loop now i just want to know how can I get the button to work on all of them

1 Answer

Your Answer

Think you can help? Login to answer this question!

just put this event also in loop so it will work for all the buttons.

— commented 7 months ago by Sarafaraz Babi

Accepted Answer

Accepted Answer

You don't provide all your code, and your description of the problem is a little light on details. You say "it only works on the last button", but you don't indicate if that means "it only fires for the last button" or "it only performs correctly for the last button".

I'm going to work from the assumption that you mean the latter. The event listener fires for all buttons, but it is always operating on the last row of controls.

That is a classic Javascript scoping problem. If your event listener was to reference contentBlock, for example, it will always be referring to the last contentBlock you created. Each time through the loop, you're overwriting the value for that variable, and all the event listeners you define are referring to that same instance of contentBlock.

Build your tableviewrow and its controls in a function. Also add your event listener within that function. That will give you scope for each set of controls, so your event listeners can operate independently on different instances of those variables. Better yet, build a CommonJS module for this specialized tableviewrow.

BTW -- I think you have an indexing problem with this loop:

for (var i = 0; i <= amountTasks ; i++){

This will loop through 11 times, not 10.