Set text field based on calculated value

You’re almost there.

The only missing piece is that you’re not telling it *when* you’d like it to do this calculation. So as of now, I believe it would just update the value of your target Input to whatever was inside of the Calculated Control as soon as the form is ready and executes everything inside of the Form Event.

What needs to happen is that you need to setup an Event Handler for the Calculated Control so that when its value changes, that change is “handled” by whatever logic you’ve placed inside of the handler. 

Here is an example form:

The labels are showing the Control Names, and they all have JavaScript Variables for the Control’s ID that is *also* the same name as the Control Name.

The formula for my Calculated Control just ads the vales from both Input Controls:

Now all we gotta do is add some code into the custom Javascript to deal with setting up the Event Handler that catches when the Caculated Control’s value has changed:

/* Just like your code I'm using the same Form Event */
NWF.FormFiller.Events.RegisterAfterReady(function(){

  /*
    But now I'm creating an event handler for when the
    Calculated Control changes using jQuery's 'on' method.

    Anytime the onChange event is fired by the control I'm
    targeting (in this case NWF$("#" + myCalculatedControl)),
    it will check to see if there are any event handlers
    attached to the control. The event handler is just a function
    or function expession that you pass as an argument into
    the 'on' method.
  */
  NWF$("#" + myCalculatedControl).on("change", function(event){

    /*
      this is the handler! we're in it!

      All of this will be executed whenever the target control
      fires an onChange event!
    */

    /* setup a variable to get the calc control's val */
    var calculatedValue = NWF$(event.target).val();

    /* convert it into an integer */
    var calculatedValueInt = parseInt(calculatedValue, 10);

    /* make a var for the output Control */
    var outputControl = NWF$("#" + myOutputControl);

    /*
      some silly logic that will display a message
      in our Output Control based on some conditions
    */
    if (Number.isNaN(calculatedValueInt)) {
      outputControl.val("Not a number :(");
    } else {
      if (calculatedValueInt > 9000) {
        outputControl.val("IT'S OVER 9000!");
      } else {
        outputControl.val("Your power level is weak!");
      }
    }

  });
});

That same code but without comments:

NWF.FormFiller.Events.RegisterAfterReady(function(){

  NWF$("#" + myCalculatedControl).on("change", function(event){

    var calculatedValue = NWF$(event.target).val();
    var calculatedValueInt = parseInt(calculatedValue, 10);
    var outputControl = NWF$("#" + myOutputControl);

    if (Number.isNaN(calculatedValueInt)) {
      outputControl.val("Not a number :(");
    } else {
      if (calculatedValueInt > 9000) {
        outputControl.val("IT'S OVER 9000!");
      } else {
        outputControl.val("Your power level is weak!");
      }
    }

  });
});

The Results:

I hope that this helps to unravel the mystery.

To learn more about events in general, here are some resources

MDN’s Introduction to Events: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

and jQuery’s on method documentation: https://api.jquery.com/on/

a list of common html element events: https://www.w3schools.com/jsref/dom_obj_event.asp