Google Apps Script按钮点击无响应问题求助

我正在为Google Sheets制作数据输入侧边栏，其他功能正常，但点击Submit按钮后无任何反应，也没有错误提示。硬编码值时脚本可以正常执行，以下是对应的代码：

InterDistForm.html 代码 #

<!doctype html>
<html lang="en">
  <style>
    table {
      border-spacing: 10px;
      width: 100%;
      font-size: 14pt;
      height: 200px;
      border: 1px;
      border-radius: 10px;
      border-color: darkblue;
      background-color: lightblue;
      align: center;
    }
    td {
      border-color: white;
    }
    tr:hover {background-color: #D6EEEE;}

    input,
      select {
        font-size: 12pt;
        width: 100%;
      }
  </style>
  <body>

    <div>
      <table>
        <tr>
          <td align="left">School Year:</td>
          <td align="left"><input type="text" name="schoolYear" value = "2025" disabled/></td>
        </tr>

        <tr>
          <td align="left">Date Received:</td>
          <td align="left"><input type="date" name="dateReceived" /></td>
        </tr>

        <tr>
          <th colspan="2"; style="background-color:Cyan;" >Student Information</th>
        </tr>

        <tr>
          <td align="left">Student ID:</td>
          <td align="left"><input type="text" name="studentID" value="0"/></td>
        </tr>
      </table>
      
      <br>
      <button id="btnSubmit">Submit</button> 
      
    </div>
    
  <script>

    function afterButtonClicked(){
      var schoolYear = document.getElementById("schoolYear");
      var dateReceived = document.getElementById("dateReceived");
      var studentID = document.getElementById("studentID");

      var rowData = {schoolYear: schoolYear.value
                      ,dateReceived: dateReceived.value
                      ,studentID: studentID.value
                    };
      
      google.script.run.addInterToForm(rowData);
    }

    document.getElementById("btnSubmit").addEventListener("click",afterButtonClicked);

   </script> 
    
  </body>
</html>

InterDistScript.gs 代码 #

var ssTransfers = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Transfers");

function loadForm() {
  
  const htmlForDialog = HtmlService.createTemplateFromFile("InterDistForm");
  const htmlOutput = htmlForDialog.evaluate();

  const ui = SpreadsheetApp.getUi();
  ui.showSidebar(htmlOutput);

}

function addInterToForm(rowData){

  ssTransfers.insertRowAfter(2); //Inserts blank row for data to be placed into
  ssTransfers.getRange(3,3,1,3).setValues([[
                               rowData.schoolYear
                              ,rowData.dateReceived
                              ,rowData.studentID
                            ]]); //needs double []

}

问题原因与修复方案 #

核心错误 #

HTML中的<input>元素仅设置了name属性，但JavaScript代码里使用document.getElementById()来获取元素——这个方法是通过id属性定位DOM元素的，因此无法获取到目标元素，后续的rowData会因value调用报错，导致google.script.run无法正常触发。

修正后的HTML代码 #

给每个input添加id属性，与name属性值保持一致：

<!doctype html>
<html lang="en">
  <style>
    table {
      border-spacing: 10px;
      width: 100%;
      font-size: 14pt;
      height: 200px;
      border: 1px;
      border-radius: 10px;
      border-color: darkblue;
      background-color: lightblue;
      align: center;
    }
    td {
      border-color: white;
    }
    tr:hover {background-color: #D6EEEE;}

    input,
      select {
        font-size: 12pt;
        width: 100%;
      }
  </style>
  <body>

    <div>
      <table>
        <tr>
          <td align="left">School Year:</td>
          <td align="left"><input type="text" id="schoolYear" name="schoolYear" value = "2025" disabled/></td>
        </tr>

        <tr>
          <td align="left">Date Received:</td>
          <td align="left"><input type="date" id="dateReceived" name="dateReceived" /></td>
        </tr>

        <tr>
          <th colspan="2"; style="background-color:Cyan;" >Student Information</th>
        </tr>

        <tr>
          <td align="left">Student ID:</td>
          <td align="left"><input type="text" id="studentID" name="studentID" value="0"/></td>
        </tr>
      </table>
      
      <br>
      <button id="btnSubmit">Submit</button> 
      
    </div>
    
  <script>

    function afterButtonClicked(){
      var schoolYear = document.getElementById("schoolYear");
      var dateReceived = document.getElementById("dateReceived");
      var studentID = document.getElementById("studentID");

      var rowData = {schoolYear: schoolYear.value
                      ,dateReceived: dateReceived.value
                      ,studentID: studentID.value
                    };
      
      google.script.run.addInterToForm(rowData);
    }

    document.getElementById("btnSubmit").addEventListener("click",afterButtonClicked);

   </script> 
    
  </body>
</html>

额外调试建议 #

• 在afterButtonClicked函数开头添加console.log("按钮已点击")，打开浏览器开发者工具（F12）的Console面板，确认按钮点击事件是否触发。
• 给google.script.run添加错误处理，捕获服务端可能的异常：

google.script.run
  .withFailureHandler(function(error) {
    alert("提交失败：" + error.message);
  })
  .addInterToForm(rowData);

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