google 工作表脚本提交按钮不起作用

Question

干草！

我是 java 脚本和构建用户表单的新手，我一直在关注教程并阅读我可以实现我想要创建的东西的地方。

我有一个朋友做了这些，他按照他发给我的教程没有遇到任何问题，我多次尝试按照它来做，直到我在 [=40= 中创建脚本] 文件并通过 java 脚本发送 google.script.run

出于某种原因，它只是不会发送，我不是最擅长调试的。我知道如何在 .gs 方面做到这一点，但 html 方面似乎没有，我被告知使用浏览器的开发工具，但我仍然不确定如何让它完全工作。

我会 post 下面的代码，希望有人能发现我哪里出错了。另外，如果您能解释为什么它不起作用以及为什么您的方法是解决方案，我将不胜感激，因为它会在我理解一切的过程中提供更多帮助。干杯。

funcs.gs

function addNewRow(data){

 const date = new Date();
 const ss = SpreadsheetApp.getActiveSpreadsheet();
 const ws = ss.getSheetByName("Compensations");
 
 ws.appendRow([date,data.rubio,data.staff,data.steam,data.steamID,]);
}

AddForm.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Compensation Form</h1>

      <div class="input-group mb-3">
        <span class="input-group-text" id="staffName">Staff Name</span>
        <input type="text" class="form-control" placeholder="Big Cahoonas" aria-label="staffName" aria-describedby="staffName">
      </div> 

      <div class="input-group mb-3">
        <span class="input-group-text" id="steamName"> Compensated Steam Name</span>
        <input type="text" class="form-control" placeholder="GetRiggityRekt" aria-label="steamName" aria-describedby="steamName">
      </div>

      <div class="input-group mb-3">
        <span class="input-group-text" id="steamID">SteamID64</span>
        <input type="number" class="form-control" placeholder="76938475322" aria-label="steamID" aria-describedby="steamID">
      </div>

      <div class="input-group mb-3">
        <span class="input-group-text" id="rubioLink">Rubio Link</span>
        <input type="text" class="form-control" id="rubioLink" placeholder="fivem.ozzy.life/id/1563423" aria-describedby="rubioLink">
      </div>

      <div class="d-grid gap-2">
        <button class="btn btn-primary" id="submit">Submit</button>
      </div>







    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

<script>

document.getElementById("submit").addEventListener("click",addRecord);

function addRecord(){

var staff = document.getElementById("staffName");
var steam = document.getElementById("steamName");
var steamID = document.getElementById("steamID");
var rubio = document.getElementById("rubioLink");

var data = {
  staff: staff.value,
  steam: steam.value,
  steamID: steamID.value,
  rubio: rubio.value
  };

google.script.run.addNewRow(data);

loadUserForm.gs

function loadForm() {

  const showPop = HtmlService.createTemplateFromFile("AddForm");
  const htmlOutput = showPop.evaluate();

 
  var ui = SpreadsheetApp.getUi();
  ui.showModalDialog(htmlOutput, "Compensation V1");
  
}

function createMenu(){

const ui = SpreadsheetApp.getUi();
const menu = ui.createMenu("Compensations");
menu.addItem("Add Record","loadForm");
menu.addToUi();

}

function onOpen(){

createMenu();

}

Answer 1

我认为在您的 HTML 中，每个输入标签的 ID 都没有设置。这样，data的每个值都是undefined。我认为这可能是您遇到问题的原因。那么，比如下面的修改呢？

发件人：

<div class="input-group mb-3">
  <span class="input-group-text" id="staffName">Staff Name</span>
  <input type="text" class="form-control" placeholder="Big Cahoonas" aria-label="staffName" aria-describedby="staffName">
</div> 

<div class="input-group mb-3">
  <span class="input-group-text" id="steamName"> Compensated Steam Name</span>
  <input type="text" class="form-control" placeholder="GetRiggityRekt" aria-label="steamName" aria-describedby="steamName">
</div>

<div class="input-group mb-3">
  <span class="input-group-text" id="steamID">SteamID64</span>
  <input type="number" class="form-control" placeholder="76938475322" aria-label="steamID" aria-describedby="steamID">
</div>

<div class="input-group mb-3">
  <span class="input-group-text" id="rubioLink">Rubio Link</span>
  <input type="text" class="form-control" id="rubioLink" placeholder="fivem.ozzy.life/id/1563423" aria-describedby="rubioLink">
</div>

收件人：

<div class="input-group mb-3">
  <span class="input-group-text">Staff Name</span>
  <input type="text" id="staffName" class="form-control" placeholder="Big Cahoonas" aria-label="staffName" aria-describedby="staffName">
</div> 

<div class="input-group mb-3">
  <span class="input-group-text"> Compensated Steam Name</span>
  <input type="text" id="steamName" class="form-control" placeholder="GetRiggityRekt" aria-label="steamName" aria-describedby="steamName">
</div>

<div class="input-group mb-3">
  <span class="input-group-text">SteamID64</span>
  <input type="number" id="steamID" class="form-control" placeholder="76938475322" aria-label="steamID" aria-describedby="steamID">
</div>

<div class="input-group mb-3">
  <span class="input-group-text">Rubio Link</span>
  <input type="text" id="rubioLink" class="form-control" id="rubioLink" placeholder="fivem.ozzy.life/id/1563423" aria-describedby="rubioLink">
</div>

在此修改中，作为示例修改，为了使用您的 Javascript addRecord() 的 ID，span 的 ID 已移至 input。
通过上述修改，当值被输入到每个输入标签并单击按钮时，data 具有值并且您的 Google Apps 脚本将带有输入值的新行附加到电子表格。

google 工作表脚本提交按钮不起作用

google sheets script submit button not working

javascript

html

google-apps-script

google-sheets

userform

发件人：

收件人：