Question

I can’t spot why the browser hangs and gets caught in the first for loop in this function, arguments.length doesn’t print a console.log either.

Here is the click function passing the colorpicker’s own id then the variable other properties to be changed:

$('#colorSelector3').click(function(){
colorPickDynamic('#colorSelector3','h1','color');
});

Here is the function where the browser hangs in the first for loop:

function colorPickDynamic(cp){
    var i,
        j,
        x,
        tag = [],
        colorProperty = [];

    for (x=0, i = 1, j = 2; x <= arguments.length; i+=2, j+=2, x++) {

        tag[x]=arguments[i];
        colorProperty[x]=arguments[j];

        console.log(arguments.length);
        console.log(colorProperty[x]);
    }

    $(cp).ColorPicker({
        color: '#0000ff',
        onShow: function (colpkr) {
            $(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            $(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {
            for (j = 2; j < arguments.length; j+=1) {
                $(tag[0]).css(colorProperty[0], '#' + hex);
            }
            $(cp + ' div').css('backgroundColor', '#' + hex);
        }
    });
}

any help would be amazing! Thanks

Answer 1

Are you sure it hangs (e.g. infinity loop)? And not just plain crashes?

Because you’re accessing arguments[i], where arguments starts at 1 and increments by 2 for each iteration. If arguments contains zero or one element, it will crash at the first iteration, trying to access arguments[1], before any logging is done.

Did you intend to access arguments[x]?