Add a dynamic on click event to a button in HTML using JavaScript

I want to create an interactive web application using html service google apps script.

I am having trouble with adding an onclick event with a function into a button.

The functions are executed when the web loads for the first time, but not when it is clicked. If I click the button later, nothing happens.

Here is the link for my project :

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

  return template.evaluate()
      .setTitle('Web App Window Title')
function getmenus() {
  var folder = DriveApp.getFolderById('0B5vEst6Tvg8nfmhRU1h4V044ODJlX2VxeHdKeFFicUx0UlMzMWhZcUxjTkRHSlZiR3FlT1k');
  var datax = []
  var result = [[]];
  var filess = folder.getFilesByType(MimeType.GOOGLE_SHEETS);
  while (filess.hasNext()) {
  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 :


function loadmenu(result) {
  var mainmenu = document.getElementById('menunav');
  for (var a in result) {
    var form = document.createElement('form');
    var hidden = document.createElement('input');

    var button = document.createElement('input');


    var br = document.createElement("br");

function menuclick(result) {;
function updateoptions(values) {


Please help me to solve the problem and maybe how to rewrite the code in a better way.



This is a tricky one. Setting the onclick attribute using the DOM expects a function. And you can't use a text formula as the function, because it evaluates to a string instead of an object. So you need to create a new function with the new key word. Right now you have:


Change to:

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

The value of the onclick attribute must be a function. In your case, you need to construct a function with a dynamic argument to be passed. You can construct the textual part of the formula with a string formula. But then the string needs to be used to create a function object.

In JavaScript you can concatenate string values with a plus sign.

"menuclick('" is a string.

result[a][1] is a string.

"')" is a string.

Note that you need to isolate the result[a][1] part between the two other strings. This is because result[a][1] needs to be evaluated, and a value retrieved from the object array.

I would also put the call into a window.onload event:

window.onload = function() {
  console.log("window.onload ran!");;

And also, use IFRAME sandbox mode:


Need Your Help

.net 4.5 not working with VS2010, INotifyDataErrorInfo not found

wpf visual-studio-2010 .net-4.5

I installed the .net 4.5 framework, but Visual Studio gives the following error

How might I identify unwanted .NET objects that aren't being garbage-collected?

c# .net memory-leaks garbage-collection

My (C# .NET 4.0) application runs over a period of days, updating a simulated account according to changes in prices acquired from a SQLite database.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.