When I include an 'onClick' attribute in setInnerXTHML() like this:
var innerHtml = '<span>Build Track: Select a city where track building should begin'+
'<div id="action-end">'+
'<form>'+
'<input type="button" value="End Track Building" id="next-phase" onClick="moveTrainAuto();" />'+
'</form>'+
'</div></span>';
actionPrompt.setInnerXHTML(innerHtml);
var btn = document.getElementById('next-phase');
btn.addEventListener('click', 'moveTrainAuto');
The 'onClick' gets dropped. I know this from inspecting the element with Firebug. This is what it reveals:
<input id="app148184604666_next-phase" type="button" value="End Track Building"/>
Here is the function called for onClick:
function moveTrainAuto(evt) {
debugger;
ajax = new Ajax();
ajax.responseType = Ajax.JSON;
ajax.ondone = function(data) {
debugger;
if(data.code == 'UNLOAD_CARGO') {
unloadCargo();
} else if (data.code == 'MOVE_TRAIN_AUTO') {
moveTrainAuto();
} else if (data.code == 'TURN_END') {
turnEnd();
} else {
/* handle error */
}
}
ajax.post(baseURL + '/turn/move-trains-auto');
}
As you can see, I've tried both 'onClick' and 'addEventListener'. Neither works. Any ideas?