Javascript 如何将从google应用程序脚本HTMLService类获得的模板插入到.html文件中？_Javascript_Html_Google Apps Script

Javascript 如何将从google应用程序脚本HTMLService类获得的模板插入到.html文件中？

javascript html google-apps-script

Javascript 如何将从google应用程序脚本HTMLService类获得的模板插入到.html文件中？,javascript,html,google-apps-script,Javascript,Html,Google Apps Script,我有一个按钮，我想用google应用程序脚本通过方法HtmlService.createTemplateFromFile（“HTML_文件”）加载的其他HTML对象替换它 button onclick函数是用javascript在.html文件中编写的： <div id="add_form_button_wraper"> <input type="button" id="add_form" onclick="addForm()" value="Add Form">

我有一个按钮，我想用google应用程序脚本通过方法HtmlService.createTemplateFromFile（“HTML_文件”）加载的其他HTML对象替换它

button onclick函数是用javascript在.html文件中编写的：

<div id="add_form_button_wraper">
  <input type="button" id="add_form" onclick="addForm()" value="Add Form">
 </div>
 <script>
   function addForm() {
     innerHTML = google.script.run.getForm(some_args);
     document.getElementById("add_form_button_wraper").innerHTML = 
     innerHTML;
  }
</script>

单击按钮后，div的内容将更改为未定义。我还尝试了HTMLService.createTemplateFromFile（）.getCode（），效果相同

如何将从应用程序脚本HTMLService获得的原始html代码插入div？

一个简单的Web应用程序示例下面是我如何使用对话框和web应用程序。我知道这不一定与你的特殊情况有关，但希望一个工作示例能给你一些关于如何继续的想法

这是一个标准web应用程序表单的简单示例。您可以将其作为对话框查看或作为Web应用程序运行。它将所有响应存储在一张工作表上

代码G.gs：

function onOpen()
{
  SpreadsheetApp.getUi().createMenu('My Tools')
    .addItem('Display Dialog', 'displayDialog')
    .addToUi();
}

function doGet()
{
  var output=HtmlService.createHtmlOutputFromFile('CyclingSurvey');
  return output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

Cycling Survey.gs:

function storeCyclingSurveyResults(rA) 
{
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('CyclingSurvey');
  var ts=Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "MM/dd/yyyy HH:mm:ss");
  rA.splice(0,0,ts);
  sh.appendRow(rA);
  return true;
}

function displayDialog()
{
  var html=HtmlService.createHtmlOutputFromFile('CyclingSurvey').setWidth(800).setHeight(500);
  SpreadsheetApp.getUi().showModelessDialog(html, 'Cycling Survey');
}

Cycling Survey.html：

<!DOCTYPE html>
<html>
<head>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    function recordData()
    {
      var q1=$('#q1').val();
      var q2=$('input[name="prefer"]:checked').val();
      var checked = [];
      $("input[name='own']:checked").each(function (){checked.push($(this).val());});
      var q3=checked.join(', ');
      var q4=$('#q4').val();
      var rA=[];
      rA.push(q1);
      rA.push(q2);
      rA.push(q3);
      rA.push(q4);
      google.script.run
        .withSuccessHandler(setResponse)
        .storeCyclingSurveyResults(rA);
    }
    function setResponse()
    {
      $('#reply').css('display','inline');
      $('#collect').css('display','none');
    }
    console.log('script here');
    </script>
    <style>
    #reply{display:none;}
    #collect{display:block;}
    </style>
</head>  
<body>
<div id="reply" >Thanks for taking the time to take our survey.  Your results have been recorded.</div>
<div id="collect">
<div style="font-weight:bold">What do you like about cycling?</div>
<textarea id="q1" rows="4" cols="50" placeholder="Enter Text Here..."></textarea>
<div style="font-weight:bold">Which type of bike do you prefer?</div>
<input type="radio" name="prefer" value="mountain bike">Mountain Bike<br />
<input type="radio" name="prefer" value="road bike" checked>Road Bike<br />
<input type="radio" name="prefer" value="fitness bike">Fitness Bike<br />
<div style="font-weight:bold">What types of bikes do you currently own?</div>
<input type="checkbox" name="own" value="Mountain Bike">Mountain Bike<br />
<input type="checkbox" name="own" value="Road Bike" checked>Road Bike<br />
<input type="checkbox" name="own" value="All Terrain Bike">All Terain Bike<br />
<input type="checkbox" name="own" value="Fitness Bike">Fitness Bike<br />
<div style="font-weight:bold">Do you prefer riding with others or alone?</div>
Alone<input id="q4" type="range" name="rating" max="10" min="0" step="1" defaultValue="5"/>Others<br />
<input type="button" id="btn1" value="Submit" onClick="recordData();" />
</div>
</body>
</html>


函数recordData（）
{
var q1=$（'#q1'）.val（）；
var q2=$（'input[name=“preference”]：checked'）.val（）；
检查的var=[]；
$（$（input[name='own']：checked”）.each（函数（）{checked.push（$（this.val（））；}）；
var q3=checked.join（'，'）；
var q4=$（'#q4'）.val（）；
var rA=[]；
rA.推力（q1）；
rA.推力（q2）；
rA.推力（q3）；
rA.推力（第四季度）；
google.script.run
.withSuccessHandler（setResponse）
.storeCyclingSurveyResults（rA）；
}
函数setResponse（）
{
$（'#reply'）.css（'display'，'inline'）；
$（'#collect'）.css（'display'，'none'）；
}
log（'scripthere'）；
#答复{显示：无；}
#收集{显示：块；}
感谢您抽出时间进行我们的调查。您的结果已被记录。
你喜欢骑自行车什么？
你喜欢哪种类型的自行车？
山地车

公路自行车

健身自行车

你目前拥有什么类型的自行车？
山地车

公路自行车

全Terain自行车

健身自行车

你喜欢和别人一起骑还是独自骑？
其他人

<!DOCTYPE html>
<html>
<head>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    function recordData()
    {
      var q1=$('#q1').val();
      var q2=$('input[name="prefer"]:checked').val();
      var checked = [];
      $("input[name='own']:checked").each(function (){checked.push($(this).val());});
      var q3=checked.join(', ');
      var q4=$('#q4').val();
      var rA=[];
      rA.push(q1);
      rA.push(q2);
      rA.push(q3);
      rA.push(q4);
      google.script.run
        .withSuccessHandler(setResponse)
        .storeCyclingSurveyResults(rA);
    }
    function setResponse()
    {
      $('#reply').css('display','inline');
      $('#collect').css('display','none');
    }
    console.log('script here');
    </script>
    <style>
    #reply{display:none;}
    #collect{display:block;}
    </style>
</head>  
<body>
<div id="reply" >Thanks for taking the time to take our survey.  Your results have been recorded.</div>
<div id="collect">
<div style="font-weight:bold">What do you like about cycling?</div>
<textarea id="q1" rows="4" cols="50" placeholder="Enter Text Here..."></textarea>
<div style="font-weight:bold">Which type of bike do you prefer?</div>
<input type="radio" name="prefer" value="mountain bike">Mountain Bike<br />
<input type="radio" name="prefer" value="road bike" checked>Road Bike<br />
<input type="radio" name="prefer" value="fitness bike">Fitness Bike<br />
<div style="font-weight:bold">What types of bikes do you currently own?</div>
<input type="checkbox" name="own" value="Mountain Bike">Mountain Bike<br />
<input type="checkbox" name="own" value="Road Bike" checked>Road Bike<br />
<input type="checkbox" name="own" value="All Terrain Bike">All Terain Bike<br />
<input type="checkbox" name="own" value="Fitness Bike">Fitness Bike<br />
<div style="font-weight:bold">Do you prefer riding with others or alone?</div>
Alone<input id="q4" type="range" name="rating" max="10" min="0" step="1" defaultValue="5"/>Others<br />
<input type="button" id="btn1" value="Submit" onClick="recordData();" />
</div>
</body>
</html>