Html cannot recognize google script function return value

Question

What I am trying to do is create a basic multiplier using google scripts. Two variables are gotten from an html form, they should then be multiplied in the calculate function in the code.gs and the answer should be returned.

I expect the screen to clear and the one sentence to display saying: "Function completed successfully, answer =" + ans.

ans being the product of the two input variables.

I get the following displayed:

Function completed successfully, answer =NaN

With the following error when inspecting the console in the browser(Chrome):

Uncaught (in promise) TypeError: Cannot read property 'querySelectorAll' of null
    at s.<anonymous> (onloadwff.js:71)
    at l (onloadwff.js:71)
    at Object.next (onloadwff.js:71)
    at n (onloadwff.js:71)

I get the same error if I try to call the function anywhere in the html using :

google.script.run.calculate();

My code:

index.hml

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form id="myForm">
      <input type="text" id="A" value="2"> X
      <input type="text" id="B" value="5">
      <input type="submit" onClick= " google.script.run.withSuccessHandler(answer).calculate(this.parentNode); return false;" value="Calculate"> = 
    </form>
    <div id="total" ></div>

  </body>
<script>
    function answer(status) {
        document.getElementById('myForm').style.display = 'none';
        document.getElementById('total').innerHTML = status;
    }
</script>

code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function calculate(form){
  var num1 = parseInt(form.A);
  var num2 = parseInt(form.B);
  var ans = num1 + num2;

return "Function completed successfully, answer =" + ans;
}

You have to set the name attribute of the input tags not the id. — Cooper
– Cooper, Commented Feb 12, 2021 at 16:18

Cooper · Accepted Answer · 2021-02-12 16:20:02Z

1

You have this:

<form id="myForm">
  <input type="text" id="A" value="2"> X
  <input type="text" id="B" value="5">
  <input type="submit" onClick= " google.script.run.withSuccessHandler(answer).calculate(this.parentNode); return false;" value="Calculate"> = 
</form>

Modifiy to this:

<form id="myForm">
  <input type="text" name="A" value="2"> X
  <input type="text" name="B" value="5">
  <input type="submit" onClick= " google.script.run.withSuccessHandler(answer).calculate(this.parentNode); return false;" value="Calculate"> = 
</form>

answered Feb 12, 2021 at 16:20

Cooper

64.2k7 gold badges28 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jose Vasquez Over a year ago

As @Cooper mentioned name will be treated as a key rather than id. For these values form event will be {"A":"2","B":"5"} so that's the reason why form.A is 2.

Collectives™ on Stack Overflow

Html cannot recognize google script function return value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related