使用 JavaScript 将动态点击事件添加到 HTML 中的按钮答案

【问题标题】：Add a dynamic on click event to a button in HTML using JavaScript使用 JavaScript 将动态点击事件添加到 HTML 中的按钮
【发布时间】：2015-08-20 04:32:33
【问题描述】：

我想使用 html 服务 google apps 脚本创建一个交互式网络应用程序。

我无法将带有函数的onclick 事件添加到按钮中。

这些函数在第一次加载网页时执行，但在点击时不执行。如果我稍后单击该按钮，则不会发生任何事情。

Here is the link for my project

代码.gs：

function doGet() {
  var template = HtmlService.createTemplateFromFile('Index');

  return template.evaluate()
      .setTitle('Web App Window Title')
      .setSandboxMode(HtmlService.SandboxMode.NATIVE);
}
function getmenus() {
  var folder = DriveApp.getFolderById('0B5vEst6Tvg8nfmhRU1h4V044ODJlX2VxeHdKeFFicUx0UlMzMWhZcUxjTkRHSlZiR3FlT1k');
  var datax = []
  var result = [[]];
  var filess = folder.getFilesByType(MimeType.GOOGLE_SHEETS);
  while (filess.hasNext()) {
    datax.push(filess.next());
  }
  datax.sort(function sorting(x,y){
      var xp = x.getName().toLowerCase();
      var yp = y.getName().toLowerCase();
      return xp == yp ? 0 : xp < yp ? -1 : 1;
    });
  for (var a in datax) {
    var ss = SpreadsheetApp.openById(datax[a].getId());
    var info = ss.getSheetByName('Info');
    var url = info.getRange('B1').getValue();
    result[a] = [datax[a].getName(),datax[a].getId(),url];
  }
  return result;
}
function processmenu(result) {
  var ss = SpreadsheetApp.openById(result);
  var sheet = ss.getActiveSheet();
  var range = sheet.getDataRange();
  var values = range.getValues();
  return values;
}

JavaScript.html：

<script>

google.script.run.withSuccessHandler(loadmenu).getmenus();

function loadmenu(result) {
  var mainmenu = document.getElementById('menunav');
  mainmenu.innerHTML='';
  for (var a in result) {
    var form = document.createElement('form');
    var hidden = document.createElement('input');
    hidden.type='hidden';
    hidden.name='name';
    hidden.value=result[a][1];

    var button = document.createElement('input');
    button.type='button';
    button.name='menu';
    button.value=result[a][0];
    button.onclick=menuclick(result[a][1]);

    form.appendChild(hidden);
    form.appendChild(button);

    mainmenu.appendChild(form);
    var br = document.createElement("br");
    mainmenu.appendChild(br);

  }
}
function menuclick(result) {
google.script.run.withSuccessHandler(updateoptions).processmenu(result);
}
function updateoptions(values) {
  alert(values);
}

</script>

请帮助我解决问题，也许如何以更好的方式重写代码。

谢谢

【问题讨论】：

您是否已将触发器添加到您的函数中？您需要将事件链接到触发器，以便事件执行方法。
你知道如何在这个函数上添加“onclick”触发器吗？我认为它已经在这一行完成了：button.onclick=menuclick(result[a][1]);
我更新了您的 Apps 脚本代码。感谢您提供对文件的访问权限。这使得找到问题成为可能。

标签： javascript html dom google-apps-script

【解决方案1】：

这是一个棘手的问题。使用 DOM 设置 onclick 属性需要一个函数。而且您不能将文本公式用作函数，因为它的计算结果是字符串而不是对象。因此，您需要使用 new 关键字创建一个新函数。现在你有：

button.onclick=menuclick(result[a][1]);

改为：

var newFunction = new Function("menuclick('" + result[a][1] + "')");
button.onclick=newFunction;

onclick 属性的值必须是函数。在您的情况下，您需要构造一个带有要传递的动态参数的函数。您可以使用字符串公式构造公式的文本部分。但是接下来需要用字符串来创建函数对象。

在 JavaScript 中，您可以使用加号连接字符串值。

"menuclick('" 是一个字符串。

result[a][1] 是一个字符串。

"')" 是一个字符串。

请注意，您需要在其他两个字符串之间隔离result[a][1] 部分。这是因为需要对result[a][1] 求值，并从对象数组中检索一个值。

我还会将 google.script.run 调用放入 window.onload 事件中：

window.onload = function() {
  console.log("window.onload ran!");
  google.script.run.withSuccessHandler(loadmenu).getmenus();
};

另外，使用IFRAME沙盒模式：

.setSandboxMode(HtmlService.SandboxMode.IFRAME);

【讨论】：

非常感谢 @Sandy 对我的代码所做的更改。现在我可以看到我们需要先定义函数的问题。很抱歉，我没有足够的声誉点来标记这个答案。再次感谢您的帮助。

【解决方案2】：

对于从谷歌来到这里的其他人仅供参考，上面选择的答案对我不起作用。

var newFunction = new Function("functionName(" + param + ")");
element.onclick=newFunction;

我不得不这样做

element.setAttribute("onclick","functionName(" + param + ")");

【讨论】：