Label HTML service checkbox according to value returned from function-CodePudding

I have succeeded in starting the html service and getting the check box itself to display. What I am stuck on is getting text to display next to the text box as a label, and I want that label text to be the return of a function in the .gs file.

The function starting the html service

function startHtml(){
//set up
  //can not define globally or script crashes
  var ui = SpreadsheetApp.getUi();

  //start html for selection
    var whichDevice = HtmlService.createHtmlOutputFromFile('start_html')          
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(400)
      .setHeight(200);
    //main window title
    ui.showModalDialog(whichDevice, 'Setup Criteria');
}

The function returning something, a value of 1

function randomFunc () {
  return "1";
}

The html code. You can see 2 of my attempts to use a element to get the return of randomFunc() to display with the checkbox. I have been able to get simple text to display for the element, but I need to be function based.

<!DOCTYPE html>
<html>
  <head>    
    <input id="testing" type="checkbox" />
      <script>
        google.script.run.randomFunc();
      </script>
    
      <label for="testing">
        <script>
        google.script.run.randomFunc();
        </script>
      </label>
   </head>
</html>

CodePudding user response：

When your showing script is modified, how about the following modification?

Modified script:

<input id="testing" type="checkbox" />
<label for="testing" id="label1"></label>
<script>
  google.script.run.withSuccessHandler(e => {
    document.getElementById("label1").innerText = e;
  }).randomFunc();
</script>

In this modification, when HTML is loaded, randomFunc() is run by google.script.run, and the returned value from randomFunc() is used with document.getElementById("label1").innerText = e.

Note:

As another approach, how about using HTML template as follows?