title: google.Script.run not returning data on DOMContentLoaded execution
body: <p>Hi not sure why this is not working I have set up some sample code to try and troubleshoot 
  can someone help me in getting return data from the .gs function onSuccess. The populate JoyBox function does not have data. I have checked with the sample code. at developers.google and my code appears to be correct.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function doGet() {
        //return HtmlService.createHtmlOutputFromFile("page")
        return HtmlService.createTemplateFromFile("page").evaluate();
      }
  
  
  function findJoy() {
    return "Joy";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"   
  integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"&gt;
          &lt;title&gt;Joy Machine&lt;/title&gt;
        &lt;/head&gt;
        
       &lt;body&gt;
       &lt;p&gt;&lt;/p&gt;
      &lt;div class ="container"&gt;
      &lt;div class = row&gt;
      &lt;div class  = col-10&gt;
      &lt;div class="input-group-prepend"&gt;
      &lt;span class="input-group-text" &gt;JoyBox&lt;/span&gt; 
          &lt;input type="text" class="form-control input-lg" id = "Joy" aria-label="Joy" aria-describedby="inputGroup-sizing-default"  &gt;
          &lt;input type="text" class="form-control input-lg"id = "More-" &gt;
      &lt;/div&gt;
         
      &lt;button type="button" class="btn btn-primary btn-lg btn-block" id = "UpdateBtn" &gt;Update&lt;/button&gt;
      &lt;/div&gt; &lt;!--col 6--&gt;
      &lt;/div&gt;&lt;!--row 6--&gt;
      &lt;/div&gt; &lt;!--container--&gt;
         
      &lt;script&gt;   
                  function updateButtonclicked(){
                   alert("button Clicked")
                  }
                   
                   function populateJoyBox(data){  
                       alert("data " ,data);
                       
                   } 
                   
                 function getJoy(){
                        google.script.run
                         .withSuccessHandler(populateJoyBox)
                         .withFailureHandler(function(){alert("Fail");})
                         .findJoy(); 
        
                   } 
                   
        document.getElementById("UpdateBtn").addEventListener("click",updateButtonclicked);
          
       
  
      &lt;/script&gt;
       &lt;!-- Optional JavaScript --&gt;
       &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script&gt;
       document.addEventListener('DOMContentLoaded', getJoy);  
      &lt;/script&gt;  
         
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>HTML "page" is:
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"&gt;
      &lt;title&gt;Joy Machine&lt;/title&gt;
    &lt;/head&gt;
  
   &lt;body&gt;
   &lt;p&gt;&lt;/p&gt;
  &lt;div class ="container"&gt;
  &lt;div class = row&gt;
  &lt;div class  = col-10&gt;
  &lt;div class="input-group-prepend"&gt;
  &lt;span class="input-group-text" &gt;JoyBox&lt;/span&gt; 
      &lt;input type="text" class="form-control input-lg" id = "Joy" aria-label="Joy" aria-describedby="inputGroup-sizing-default"  &gt;
      &lt;input type="text" class="form-control input-lg"id = "More-" &gt;
  &lt;/div&gt;
  
  &lt;button type="button" class="btn btn-primary btn-lg btn-block" id = "UpdateBtn" &gt;Update&lt;/button&gt;
  &lt;/div&gt; &lt;!--col 6--&gt;
  &lt;/div&gt;&lt;!--row 6--&gt;
  &lt;/div&gt; &lt;!--container--&gt;
  
  &lt;script&gt;   
              function updateButtonclicked(){
               alert("button Clicked")
              }
  
               function populateJoyBox(data){  
                   alert("data " ,data);
  
               } 
  
             function getJoy(){
                    google.script.run
                     .withSuccessHandler(populateJoyBox)
                     .withFailureHandler(function(){alert("Fail");})
                     .findJoy(); 
  
               } 
  
    document.getElementById("UpdateBtn").addEventListener("click",updateButtonclicked);
  
  
  
  &lt;/script&gt;
   &lt;!-- Optional JavaScript --&gt;
   &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
  &lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script&gt;
   document.addEventListener('DOMContentLoaded', getJoy);  
  &lt;/script&gt;  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am looking for Joy ... </p>