Question

This is driving me crazy and I have no idea what is causing the issue. I have two arrays, one which lists the pageID and the other that lists the pages.

When I try using the following code the ‘page’ always sends back ‘front’. If I put an alert during the for loop before I declare the variable “var newObject” the output is correct and the pages show “front, insideLeft, insideRight and back”.

All other attributes are outputted correctly.

Please find below my code:

    var pageID = ["cardFront","cardInsideL","cardInsideR","cardBack"];
    var pages = ["front","insideLeft","insideRight","back"];

    for (var i=0; i<pageID.length; i++) {
        var cfTextarea = $('#' + pageID[i] + ' textarea'); //array of textareas

        //Get each textarea properties and encode to json
        $("#" + pageID[i] + " textarea").each(function(){

        var txtOffset = $(this).offset();
        var divOffset = $("#" + pageID[i]).offset();

        var newObject = { 
            'page'      : pages[i],
            'id'        : $(this).attr('id'),
            'src'       : $(this).attr('src'),
            'width'     : $(this).width(),
            'height'    : $(this).height(),
            'top'       : txtOffset.top - divOffset.top,
            'left'      : txtOffset.left - divOffset.left,
            'rotation'  : '0',
            'colour'    : $(this).css("color"),
            'size'      : $(this).css("font-size"),
            'bold'      : $(this).css("font-weight"),
            'underline' : $(this).css("text-decoration"),
            'align'     : $(this).css("text-align"),
            'font'      : $(this).css("font-family"),
            'text'      : $(this).val() 
        };
        data.textareas.push(newObject);
        });
    }

Answer 1

The problem is that the function you pass to each will only ever get i=0.

You can work around this by doing this (untested, but this is the standard approach):

function mk_add_text_area(data, page_id, page) {
    return function(elem) {
        var txtOffset = $(elem).offset();
        var divOffset = $("#" + page_id).offset();

        var newObject = { 
            'page'      : page,
            'id'        : $(elem).attr('id'),
            'src'       : $(elem).attr('src'),
            'width'     : $(elem).width(),
            'height'    : $(elem).height(),
            'top'       : txtOffset.top - divOffset.top,
            'left'      : txtOffset.left - divOffset.left,
            'rotation'  : '0',
            'colour'    : $(elem).css("color"),
            'size'      : $(elem).css("font-size"),
            'bold'      : $(elem).css("font-weight"),
            'underline' : $(elem).css("text-decoration"),
            'align'     : $(elem).css("text-align"),
            'font'      : $(elem).css("font-family"),
            'text'      : $(elem).val() 
        };
        data.textareas.push(newObject);
    }
}

then later on…

    //Get each textarea properties and encode to json
    $("#" + pageID[i] + " textarea").each(mk_add_text_area(data, pageID[i], pages[i]));