Question

我一直在尝试使HTML代码能够连接到Google表格以粘贴数据，但是即使使我的代码仍然显示错误，我也不知道有人可以请问这件事的原因。

问题在于“表单”窗口无法打开，无法填写用于在Google表格中提交数据的表单。

我非常感谢您的帮助。

这是工作表附加的链接

https://docs.google.com/spreadsheets/d/1qFNb5NPuJBvgG7u3UxcNcf4h6hu2lkuabP7emLc7pwE/edit?usp=sharing

<!DOCTYPE html>
<html>
   <head>
      <base target="_top">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
      <script>
         function AddRow()
         {
           var Invoice = document.getElementById("Invoice").value;
           var  InvoiceDate = document.getElementById("InvoiceDate").value;
           var Code = document.getElementById("Code").value;
           var Size = document.getElementById("Size").value;
           var ProductName = document.getElementById("ProductName").value;
           var Transaction = document.getElementById("Transaction").value;
           var StockQty = document.getElementById("StockQty").value;
           var MRP = document.getElementById("MRP").value;
         
           if(InvoiceDate != '' && Code != '' && Size != '' && ProductName != '' && Transaction != '' && StockQty != '' && MRP != '')
           {
           google.script.run.AddRecord(InvoiceDate, Code, Size, ProductName, Transaction,   StockQty,   MRP);
           document.getElementById("Invoice").value = '';
           document.getElementById("InvoiceDate").value = '';
           document.getElementById("Code").value = '';
           document.getElementById("Size").value = '';
           document.getElementById("ProductName").value = '';
           document.getElementById("Transaction").value = '';
           document.getElementById("StockQty").value = '';
           document.getElementById("MRP").value = '';
           document.getElementById("display_error").innerHTML = "";
           }
           else
           {
           document.getElementById("display_error").innerHTML = "Please Enter All Information!";
           }
         }
      </script>
   </head>
   <body>
      <div style="padding: 10px;" >
         <form>
            <div class="form-row">
               <div class="form-group col-md-3">
                  <label for="Timestamp">Invoice</label>
                  <input type="text" id="Timestamp" class="form-control" />
               </div>
               <div class="form-group col-md-3">
                  <label for="Name">InvoiceDate</label>
                  <input type="text" id="Name" class="form-control" />
               </div>
            </div>
            <div class="form-row">
               <div class="form-group col-md-3">
                  <label for="Shift">Code</label>
                  <input type="text" id="Shift" class="form-control" />
               </div>
            </div>
            <div class="form-row">
               <div class="form-group col-md-3">
                  <label for="Product">Size</label>
                  <input type="text" id="Product" class="form-control" />
               </div>
               <div class="form-group col-md-3">
                  <label for="Batch">ProductName</label>
                  <input type="text" id="Batch" class="form-control" />
               </div>
               <div class="form-group col-md-3">
                  <label for="Machine" >Transaction</label>
                  <input type="text" id="Machine" class="form-control" />
               </div>
            </div>
            <div class="form-row">
               <div class="form-group col-md-3">
                  <label for="MfgExp" >StockQty</label>
                  <input type="text" id="MfgExp" class="form-control "/>
               </div>
            </div>
            <div class="form-row">
               <div class="form-group col-md-3">
                  <label for="Yield" >MRP</label>
                  <input type="text" id="Yield" class="form-control "/>
               </div>
            </div>
            <div class="form-group col-md-3">
               <input type="button" value="Submit" class="btn btn-primary" onclick="AddRow()" />
               <div id="display_error" style="color: red" ></div>
            </div>
         </form>
      </div>
   </body>
</html>

Answer 1

我相信您会将标签与输入元素ID混淆。

编写var Invoice = document.getElementById("Invoice").value;时，是在告诉脚本在HTML中使用id="Invoice"查找元素。

如您所知，当您按下提交按钮时，控制台将显示错误：“无法获取null的value属性”，这意味着它找不到具有提供给document.getElementById的id的元素。 <-请先阅读本文档，然后再继续。

解决方案：

更改HTML <input>元素的id属性，使其与您作为id参数传递给document.getElementById的值相对应

示例：

我从您的HTML代码中提取了以下几行，请参阅注释：

<script>
var Invoice = document.getElementById("Invoice").value; // Here you are saying id="Invoice".
</script>
<div class="form-group col-md-3">
   <label for="Timestamp">Invoice</label>
   <input type="text" id="Timestamp" class="form-control" />  <!-- Here: id="Timestamp" -->
</div>

这就是为什么您遇到错误的原因。正确映射输入ID。但是更重要的是，阅读HTML和JavaScript会有很大帮助。

Google Apps脚本与Google数据表相关联

1 个答案:

解决方案：

示例：