Google应用程序脚本HTML服务和jQuery_Jquery_Google Apps Script

Google应用程序脚本HTML服务和jQuery

jquery google-apps-script

Google应用程序脚本HTML服务和jQuery,jquery,google-apps-script,Jquery,Google Apps Script,我正在使用GAS-HTML服务创建接口，并尝试使用Javascript处理客户端操作 HTML服务和Caja中是否不支持“this” 在我的HTML文件中，我有以下内容： <input type="button" name="RemoveSample_1" id="RemoveSample_1" value="Remove" onClick="removeSampleNow(this)" /> 和一个简单的Javascript函数进行测试： <script> f

我正在使用GAS-HTML服务创建接口，并尝试使用Javascript处理客户端操作

HTML服务和Caja中是否不支持“this”

在我的HTML文件中，我有以下内容：

<input type="button" name="RemoveSample_1" id="RemoveSample_1" value="Remove" onClick="removeSampleNow(this)" />

和一个简单的Javascript函数进行测试：

<script>
  function removeSampleNow(thisObj) {

    alert(thisObj.id);

  }
</script>


函数removeSampleNow（thisObj）{
警报（thisObj.id）；
}

它可以在我的桌面上本地运行html，但在汽油中运行时就不行了。错误为“未定义”

我们不能将参数传递给函数调用吗？那么，我们如何基于选中/单击的按钮驱动HTML元素操作呢

谢谢您的帮助。

您不能在html部分使用单击属性。请参阅限制

请参阅“动态添加脚本或外部CSS”以了解如何执行此操作的示例

<script>
function doSomething() { alert('but this is fine!'); }
document.write('<input type="button" id="button1">')
document.getElementById('button1').onclick = doSomething;
</script>


函数doSomething（）{alert（'但这很好！'）；}
文件。写入（“”）
document.getElementById（'button1'）。onclick=doSomething；

我不同意@mzimmerman，您可以使用onclick html属性（尽管Caja会处理它）。在回调函数中，通过参数而不是“this”访问元素

<html>
  <head>
    <script>
      function onClickCallback(element){
        console.log('element.id ' + element.id);
        element.value = 'Clicked!';
      }
    </script>
  </head>
  <body>
      <input type="button" name="b1" id="b1" value="Click me" onclick='onClickCallback(this)' />
  </body>
</html>

我知道工作有两种方式。第一个是最简单的。在回调函数中，元素将是参数，而不是“this”

<html>
  <head>
    <script>
      function onClickCallback(element){
        console.log('element.id ' + element.id);
        element.value = 'Clicked!';
      }
    </script>
  </head>
  <body>
      <input type="button" name="b1" id="b1" value="Click me" onclick='onClickCallback(this)' />
  </body>
</html>


函数onClickCallback（元素）{
console.log（'element.id'+element.id）；
element.value='Clicked！'；
}

第二种方法使用JQuery的强大功能在运行时动态绑定回调函数，在这种情况下，回调函数确实通过“this”访问元素（并且不需要函数的参数）。虽然第二个示例不是必需的（第一个解决方案可以很好地工作），但我将其包括在内，因为您会发现JQuery这样的库为您提供了很多

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
      // like onload but doesn't wait for images, only the dom
      $(document).ready(function() {
        // bind the click handler at run time
        $('#b1').click(onClickCallback);
      });

      function onClickCallback(){
        console.log('this.id ' + this.id);
        this.value = 'Clicked!';
      }
    </script>
  </head>
  <body>
      <input type="button" name="b1" id="b1" value="Click me" />
  </body>
</html>


//与onload类似，但不等待图像，只等待dom
$（文档）.ready（函数（）{
//在运行时绑定单击处理程序
$（'#b1'）。单击（onClickCallback）；
});
函数onClickCallback（）{
console.log（'this.id'+this.id）；
this.value='Clicked！'；
}