Google Apps Script中向HTML传参生成input标签报错求助

我想用Google Apps Script的HtmlTemplate函数，为Google Drive文件夹里的每个文件生成<input type="image">标签。静态标签能正常运行：

<input type="image" class="teamLogo" onClick="getTeam('BAL');" src="https://drive.google.com/uc?id=12p5P6dmmHTX3PIq0kyUKr2qhWtSkmi3h">

但尝试用变量动态设置球队缩写和图片ID时，触发了HTML内容格式错误。

我的HTML模板代码：

<? var logos = getTeamLogos() ?>
<? for (i in logos) { ?>
    <input type="image" class="teamLogo" onClick="getTeam('"+logos[i][0]+"');" src="https://drive.google.com/uc?id="+logos[i][1]+"">
<? } ?>

调用的getTeamLogos函数：

function getTeamLogos(){
    var getLogos = DriveApp.getFolderById('redacted').getFiles();
    var logos = []
    while (getLogos.hasNext()) {
         var logo = getLogos.next();
         var teamAbbrv = logo.getName();
         var logoId = logo.getId();
         logos.push([teamAbbrv,logoId])
         }
    logos.sort()
    console.log(logos)
    return logos
}

函数返回的日志数据正常，但报错：Exception: Malformed HTML content: <input type="image" class="teamLogo" onClick="getTeam('"+logos[i][0]+"');" src="https://drive.google.com/uc?id="+logos[i][1]+"">

问题原因与修复方案 #

问题出在HtmlTemplate的语法使用错误——你不能在模板的HTML属性里用+拼接变量，应该直接用<?= 变量 ?>的方式插入值，模板引擎会自动处理引号转义和格式问题。

修正后的HTML模板代码：

<? var logos = getTeamLogos(); ?>
<? for (var i = 0; i < logos.length; i++) { ?>
    <input type="image" class="teamLogo" onclick="getTeam('<?= logos[i][0] ?>')" src="https://drive.google.com/uc?id=<?= logos[i][1] ?>">
<? } ?>

额外优化点：

• 把for (i in logos)改成普通for循环，避免for...in遍历数组时可能触发的原型链属性遍历问题，更安全可靠。
• 属性名统一用小写onclick，符合HTML规范写法。

内容的提问来源于stack exchange，提问作者Richie Travers