Q:

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
Code.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>

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

A:

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:
button.onclick=menuclick(result[a][1]);

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

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 google.script.run call into a window.onload event:
window.onload = function() {
  console.log("window.onload ran!"); 
  google.script.run.withSuccessHandler(loadmenu).getmenus();
};

And also, use IFRAME sandbox mode:
.setSandboxMode(HtmlService. SandboxMode. IFRAME);

