为什么这个HTML按钮不起作用

时间:2015-02-08 15:17:09

标签: javascript html javascript-events google-apps-script

我正在使用" Google Apps脚本"詹姆斯费雷拉。

到目前为止,我已经找到了几个代码示例的问题,并且能够偶然发现它们。

我对HTML并不好,这个让我感到难过。

.GS

function startWorkflow() {
 var html = HtmlService.createTemplateFromFile('startWorkflow').evaluate()
  .setTitle('Start Workflow').setWidth(300)
  .setSandboxMode(HtmlService.SandboxMode.NATIVE);
  ui.showSidebar(html);
}

html的

<div id="wrapper">
<div>
<span>Let's get started with your workflow. 
First; 
Add an approver by entering their email address
in the Approvers box and clicking the add button.
When you are done adding appovers, click the Start Workflow button.</span>
</div>
<br>
<div>
<span class="sectionHeader">Approvers</span><br>
<div id="approvers"></div>
<div>
  <form id="addApprover">
    <input type="email" id="approver" placeholder="Email Address">
    <input type="submit" class="button blueButton" value="Add">
  </form>
</div>
<br>
<div class="center">
  <span id="startButton" class="button redButton">Start Workflow</span>
</div>
</div>

<?!= HtmlService.createHtmlOutputFromFile('styles').getContent(); ?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

styles.html

<style type="text/css">

.sectionHeader {
 color: #202020 ;
 font-size: 18px;
 text-decoration:underline;
 margin-bottom: 20px;
 }

.button {
 color: #FFFFFF;
 font-size: 12px;
 moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 padding: 3px;
 border:0;
 }

.blueButton {
  background-color: #3366FF;
 }

.redButton {
 background-color: #C80000;
}

.button:hover {
  opacity:0.7;
 }

.center {
 text-align: center:
}

#wrapper {
  margin:2px 4px 3px 4px;
  font-family: Verdana, Generva, sans-serif;
}

.reminder {
  color: #FFFFFF;
  background-color: #3366FF;
  font-size: 10px;
  moz-border-radius: 3x;
  -webkit-border-radius: 3px;
 padding: 3px;
 }

问题出在&#34;启动工作流程&#34;按钮因为我只有文字。

1 个答案:

答案 0 :(得分:0)

这是您引用的HTML:

<span id="startButton" class="button redButton">Start Workflow</span>

span标记 支持onclickonmouseup等事件。它看起来像这样:

<span id="startButton" class="button redButton" onmouseup="fncStartWorkFlow()">Start Workflow</span>

<script>标记中需要有相应的功能:

<script>
  function fncStartWorkFlow() {
    console.log('fncStartWorkFlow() ran!');
    //more code here
  };
</script>

进行这些更改,然后查看浏览器控制台以查看是否在控制台上打印了一条消息。