点击按钮后如何显示计算值与结果表格？

针对你提出的两个核心问题，以下是修改后的代码和详细说明：

核心问题修复说明 #

1. 仅在按钮点击后显示结果表格 #

初始状态下结果容器为空，只有在按钮点击并成功获取计算结果后，才会动态生成并插入表格内容，确保表格不会提前显示。

2. 正确传递计算面积值到Web应用 #

利用Google Apps Script的google.script.run.withSuccessHandler()异步回调机制，接收服务器端返回的计算结果，避免依赖不可靠的全局变量，同时一次性获取面积和计算时间数据。

修改后的Google Apps Script代码 #

function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

function calculateAreaServer(width, height) {
  // 将输入转换为数字，避免字符串相乘错误
  const numWidth = Number(width);
  const numHeight = Number(height);
  const area = numWidth * numHeight;
  // 生成可读格式的计算时间
  const calculationTime = new Date().toLocaleString();
  
  // 保留原有写入表格的逻辑
  const ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/xxxx/edit#gid=0");
  const ws = ss.getSheetByName("sheet1");
  ws.getRange(1,1).setValue(numWidth);
  ws.getRange(2,1).setValue(numHeight);
  
  // 返回包含面积和时间的结果对象
  return {
    area: area,
    time: calculationTime
  };
}

修改后的HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      table { border-collapse: collapse; margin-top: 12px; }
      th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
      th { background-color: #f8f8f8; }
      .input-container { margin-bottom: 10px; }
    </style>
  </head>
  <body>
    <div id="inputArea">
      <table>
        <thead>
          <tr>
            <th>面积计算输入</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>宽度</td>
            <td><input id="width" type="number" required></td>
          </tr>
          <tr>
            <td>高度</td>
            <td><input id="height" type="number" required></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="input-container">
      <input type="button" onclick="calculateArea()" value="开始计算">
    </div>

    <!-- 结果容器，初始为空 -->
    <div id="resultContainer"></div>

    <script>
      function calculateArea() {
        const widthInput = document.getElementById('width');
        const heightInput = document.getElementById('height');
        const width = widthInput.value.trim();
        const height = heightInput.value.trim();
        
        // 验证输入有效性
        if (!width || !height || isNaN(width) || isNaN(height)) {
          alert("请输入有效的数字");
          return;
        }

        // 调用服务器端计算函数，通过回调获取结果
        google.script.run
          .withSuccessHandler(function(result) {
            // 动态生成结果表格HTML
            const resultTable = `
              <table>
                <thead>
                  <tr>
                    <th>计算结果</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>面积</td>
                    <td>${result.area}</td>
                  </tr>
                  <tr>
                    <td>计算时间</td>
                    <td>${result.time}</td>
                  </tr>
                </tbody>
              </table>
            `;
            // 将表格插入容器，实现点击后显示
            document.getElementById("resultContainer").innerHTML = resultTable;
          })
          .withFailureHandler(function(error) {
            alert("计算出错：" + error.message);
          })
          .calculateAreaServer(width, height);
      }
    </script>
  </body>
</html>

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