Problems with Photoshop's onChanging function

Question

I'm trying to change some label text depending on the state of a checkbox for Photoshop Script UI. Only it's not updating at all. No idea why.

Ideally I'd like it to say "Some text" when ticked and "Some other text" when left unchecked. And change dynamically.

Here's my code

// DIALOG
// ======
var dlg = new Window("dialog");
   dlg.text = "Title"; 
   dlg.preferredSize.width = 180; 
   dlg.preferredSize.height = 100; 
   dlg.orientation = "column"; 
   dlg.alignChildren = ["center","top"]; 
   dlg.spacing = 10; 
   dlg.margins = 16; 

var statictext1 = dlg.add("statictext", undefined, undefined, {name: "statictext1"}); 
   statictext1.text = "Some static text"; 
   statictext1.justify = "center"; 

var checkbox1 = dlg.add("checkbox", undefined, undefined, {name: "checkbox1"}); 
   checkbox1.text = "Some text";
   checkbox1.value = true;
   

// GROUP1
// ======
var group1 = dlg.add("group", undefined, {name: "group1"}); 
    group1.orientation = "row"; 
    group1.alignChildren = ["left","center"]; 
    group1.spacing = 10; 
    group1.margins = 0; 

// add buttons
group1.add ("button", undefined, "OK");
group1.add ("button", undefined, "Cancel");

// Define behavior for when the slider value changes
dlg.checkbox1.onChanging = function() 
{
   var textArr = ["Some text", "Some other text"]
   var val = dlg.checkbox1.value;
   // Update the label text with the current checkbox value.
   dlg.checkbox1.text = textArr[val];
}

var myReturn = dlg.show();

Answer 1

The Checkbox control fires the onClick event and not the onChanging event.

The only controls that fire the onChanging event are:

• EditText
• Scrollbar
• Slider

Therefore consider changing this part in your script:

// Define behavior for when the slider value changes
dlg.checkbox1.onChanging = function() {
  // ...
}

to the following instead:

// Define behavior for when the checkbox value changes
dlg.checkbox1.onClick = function() {
   var textArr = ["Some text", "Some other text"]
   var val = checkbox1.value ? textArr[0] : textArr[1];
   statictext1.text = val;
}

Explanation

In the body of the preceding function for the onClick event, i.e. the part that reads;

var val = checkbox1.value ? textArr[0] : textArr[1];

we utilize the conditional (ternary) operator to check the value property of checkbox1. If checkbox1 is checked (true) we assign the string "Some text" to the val variable, otherwise if checkbox1 is unchecked (false) we assign the string "Some other text" to the val variable instead.

Additional changes:

The following changes also need to be carried out:

1. As checkbox1's initial value is set to true, i.e. it's checked, you'll need to change line number 13 from this:

   statictext1.text = "Some static text";
   

   to this:

   statictext1.text = "Some text";
   

2. Also consider setting the size property for statictext1. As you can see on line number 15 below the following has been added:

   statictext1.size = [180, 20];
   

   This will ensure it's width accomodates the "Some other text" string.

Revised script:

Here is the full revised script:

// DIALOG
// ======
var dlg = new Window("dialog");
    dlg.text = "Title";
    dlg.preferredSize.width = 180;
    dlg.preferredSize.height = 100;
    dlg.orientation = "column";
    dlg.alignChildren = ["center","top"];
    dlg.spacing = 10;
    dlg.margins = 16;

var statictext1 = dlg.add("statictext", undefined, undefined, {name: "statictext1"});
    statictext1.text = "Some text"; // <--- Note: Also change this !
    statictext1.justify = "center";
    statictext1.size = [180, 20];   // <--- Note: Also set the width/height !

var checkbox1 = dlg.add("checkbox", undefined, undefined, {name: "checkbox1"});
    checkbox1.text = "Some text";
    checkbox1.value = true;


// GROUP1
// ======
var group1 = dlg.add("group", undefined, {name: "group1"});
    group1.orientation = "row";
    group1.alignChildren = ["left","center"];
    group1.spacing = 10;
    group1.margins = 0;

// add buttons
group1.add ("button", undefined, "OK");
group1.add ("button", undefined, "Cancel");

// Define behavior for when the checkbox value changes
dlg.checkbox1.onClick = function() {
   var textArr = ["Some text", "Some other text"]
   var val = checkbox1.value ? textArr[0] : textArr[1];
   statictext1.text = val;
}

var myReturn = dlg.show();