Using Javascript function parameters with onClick in photoshop dialog not working

Question

I've got this script here (it's alot, sorry):

    var dlg = new Window('dialog', 'Templates',[1100,540,1465,720]);
    dlg.btnPnl = dlg.add('panel', [20,15,345,155], 'Please select your template:');
    dlg.btnPnl.Shoes = dlg.btnPnl.add('button', [20,55,300,45], 'Shoes, Hats and Belts', {name:'ok'});
    dlg.btnPnl.Bags = dlg.btnPnl.add('button', [20,85,300,45], 'Bags and Pouches', {name:'ok'});
    dlg.btnPnl.Shoes.onClick = extendCanvas(0.035, 1.035)
    dlg.btnPnl.Bags.onClick = extendCanvas(0.221, 1.221)
    dlg.show();

function extendCanvas(negative, positive) {

    #target photoshop

var doc = activeDocument;
var docWidth = activeDocument.width;
var docHeight = activeDocument.height;
var docName = activeDocument.name;
var guides = activeDocument.guides;

// If width is longer than height, extend height

if(docHeight/ docWidth < 1.044) {

    app.preferences.rulerUnits = Units.PIXELS 
    app.preferences.typeUnits = TypeUnits.PIXELS

    var stepOne = docWidth * 1.044;
    var stepTwo = stepOne * negative; // NEGATIVE
    var stepThree = stepOne - stepTwo;
    var newHeight = stepThree

    doc.resizeCanvas(null, UnitValue(stepThree, "px"), AnchorPosition.BOTTOMCENTER)
    doc.guides.add(Direction.HORIZONTAL, stepThree)
    doc.resizeCanvas(null, UnitValue(stepOne, "px"), AnchorPosition.TOPCENTER)
    doAction('[White Layer & Move]','Line Action')


// If height is longer than width, extend width    

    } else if(docWidth/docHeight < 0.957) {
        app.preferences.rulerUnits = Units.PIXELS
        toSubtract = docHeight * negative; // NEGATIVE
        newHeight = docHeight - toSubtract;

        app.preferences.rulerUnits = Units.PIXELS 
        app.preferences.typeUnits = TypeUnits.PIXELS     

        doc.resizeCanvas(UnitValue(docHeight * 0.957, "px"), null, AnchorPosition.BOTTOMCENTER)
        doc.guides.add(Direction.HORIZONTAL, docHeight)

        var docWidth = doc.width;
        var newHeight = docHeight * positive; //POSITIVE
        var newWidth = docWidth * positive; //POSITIVE

        doc.resizeCanvas(UnitValue(newWidth, "px"), null, AnchorPosition.TOPCENTER)
        doc.resizeCanvas(null, UnitValue(newHeight, "px"), AnchorPosition.TOPCENTER)
        doAction('[White Layer & Move]','Line Action')


    } 

dlg.close();

}

And it works great when I don't have just the one function extendCanvas with its parameters and instead have two separate functions for both Shoes and Bags and each onClick calls them. For some reason though, when I consolidate them into one and add parameters to a function in an onClick, when I run the script it just completely ignores the dlg (it doesn't display) and just runs the function instead (incorrectly too, as the final canvas size is over so slightly off).

I'm completely baffled and would really appreciate some help.

Thanks in advance!

Answer 1

Add your click handlers like this:

    dlg.btnPnl.Shoes.onClick = function() {extendCanvas(0.035, 1.035);};