Button Event to assign a value in the text box- Using Custom JavaScript

HTML Code

<div class="oj-flex">
  <div class="oj-flex-item oj-sm-12 oj-md-1"></div>
  <oj-label class="oj-flex-item oj-sm-12 oj-md-3">Enter Your Text</oj-label>
</div>
<div class="oj-flex">
  <div class="oj-flex-item oj-sm-12 oj-md-1"></div>
  <oj-input-text label-hint="Text" class="oj-flex-item oj-sm-12 oj-md-6" id="nameID"></oj-input-text>
</div>
<div class="oj-flex">
  <div class="oj-flex-item oj-sm-12 oj-md-1"></div>
  <div class="oj-flex-item oj-sm-12 oj-md-2">
    <oj-button on-oj-action="[[$listeners.ojButtonOjAction]]">Get Length</oj-button>
  </div>
</div>
<div class="oj-flex">
  <div class="oj-flex-item oj-sm-12 oj-md-1"></div>
  <oj-input-text label-hint="Output" class="oj-flex-item oj-sm-12 oj-md-6" value="{{ $variables.outputNameLengthStr }}"></oj-input-text>
</div>

Create a Variable

Assign as Shown below

JavaScript Code

define([], function() {
  'use strict';

  var PageModule = function PageModule() {};
  
  PageModule.prototype.getLength = function () {
  var namelength  = document.getElementById('nameID').value.length; 
  console.log("User Name Length = " + namelength);
  
  console.log("setting the value to lengthID");
  
    return "Input Text Length = " + namelength; 
  
  };
  return PageModule;
});

Action Chain

Return Variable Mapping