时间戳

首页 > 解决方案 > html侧边栏数据无法访问

javascript - html侧边栏数据无法访问

问题描述

我有一个谷歌表，我打开了脚本编辑器并打开了两个文件，一个脚本文件和一个 html 文件。这是我的脚本文件中的内容：

//to load html sidebar
function loadHome() {
  const htmlSidebar = HtmlService.createTemplateFromFile("home");
  const htmlOutput = htmlSidebar.evaluate();
  const ui = SpreadsheetApp.getUi();
  ui.showSidebar(htmlOutput);
}

//to create a custom menu
function createMenu(){
   const ui = SpreadsheetApp.getUi();
   const menu = ui.createMenu("AC Paz");
   menu.addItem("Side Registration", "loadHome");
    menu.addItem("Order Framing", "loadFraming");
   menu.addToUi();
}

//to make sure custom menu is loaded on open
function onOpen(){
  createMenu();
}

//to access data passed on html input fields
function userClicked(userInfo){
 
 var ss = SpreadsheetApp.getActiveSpreadsheet();
 var ws = ss.getSheetByName("Site Information");

  ws.appendRow([userInfo.firstName, userInfo.lastName, new Date()])
}

这是我的 html 文件中的内容：

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    
    <div >
            <input id="fn" type="text" >
            <label for="fn">First Name</label>
    </div>
    <div >
            <input id="ln" type="text">
            <label for="ln">Last Name</label>
    </div>
    
    <button id="btn">Add</button>
       <script>
        document.getElementById("btn").addEventListener("click",doStuff);
        
        function doStuff(){
        
        var userInfo = {}
        
        userInfo.firstName = document.getElementById("fn").value;
        userInfo.lastName = document.getElementById("ln").value;
        google.script.run.userClicked(userInfo);
        document.getElementById("fn").value = "";
        document.getElementById("ln").value = "";
          }
        </script>

这是我的问题：当我在输入字段中键入内容并单击按钮时，没有任何内容传递到电子表格中，但是输入字段中的条目被清除。

标签： javascripthtmlgoogle-apps-scriptsidebar

解决方案

尝试这个：

HTML：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    
    <div >
            <input id="fn" type="text" >
            <label for="fn">First Name</label>
    </div>
    <div >
            <input id="ln" type="text">
            <label for="ln">Last Name</label>
    </div>
    
    <button id="btn">Add</button>
       <script>
       window.onload=function(){
        document.getElementById("btn").addEventListener("click",doStuff);
        
        function doStuff(){
        
        var userInfo = {}
        
        userInfo.firstName = document.getElementById("fn").value;
        userInfo.lastName = document.getElementById("ln").value;
        google.script.run
        .withSuccessHandler(function(){
          document.getElementById("fn").value = "";
          document.getElementById("ln").value = "";   
        })
        .userClicked(userInfo);
        
          }
          }
        </script>
        </body>
        </html>

GS：

function userClicked(userInfo){
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var ws = ss.getSheetByName("Sheet1");
  ws.appendRow([userInfo.firstName, userInfo.lastName, new Date()])
}

function showMySideBar() {
  SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('ah1'))
}

推荐阅读