GASで、HTMLフォームで回答した値をスプレッドシートに入力したいです。

前提・実現したいこと

Google Apps Scriptで、HTMLフォームで回答した値をスプレッドシートのセルに入力したいです。

HTML、CSS、JavaScriptを少し勉強しただけなので初歩的な質問になってしまい申し訳ありません。

発生している問題・エラーメッセージ

ReferenceError: 「document」が定義されていません。（行 2、ファイル「コード」）

###GAS

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

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>コンディション管理</h1>
    <form>
      <table>
        <tr>
          <th>名前</th>
          <td>
            <input type="text" id="playerName">
          </td>
          <td>
            <input type="button" id="btn" value="確認">
          </td>
        </tr>
      </table>
    </form>
    <?
    btn = document.getElementById("btn");
    btn.onclick = function (){
    var playerName =  document.getElementById("playername");
    var SS = SpreadsheetApp.openById("1fYFoYJTZTb5ONdI6_3xqfJjIaQwiEuEDwDvHu_6Dr3Y");
    var sheet = SS.getSheetByName("個人データ");
    var rangeToInput = sheet.getRange(2, 3);
    rangeToInput.setValue(playerName);

}
    ?>
  </body>
</html>

試したこと

GASはJSと違い、サーバー側でレンダリングされるため、document.getElemenByIdは使えないということは分かったのですが、どうすればいいか分かりませんでした。

補足情報（FW/ツールのバージョンなど）

退会済みユーザー

2018/03/03 14:46

GASはどこに記述されていますか？入力値をセットするスプレッドシートでしょうか、単体のスクリプトファイルでしょうか？

行動規範の内容に同意します

回答1件

私も初心者ですが、ちょうど同じようなところを勉強中です。

<コード.gs>
function doGet(){
return HtmlService.createTemplateFromFile("index").evaluate();
}
これは問題ないと思います。

次にindex.htmlですが、下記のようではいかがでしょうか。

<!DOCTYPE html> <html lang="ja"> <head> <base target="_top"> </head> <body> <h2>コンディション管理</h2> <form method="post" action="https://indexを公開するurlを記入してください /dev"> <p> <label><h3>名前：</h3><input type="text" name="name"></label> </p> <p> <label><h3>好きな食べ物：</h3><input type="text" name="food"></label> </p> <p> <input type="submit" value="送信する"> </p> </form> </body> </html>

次にformのデータをpostで受け取ります。
<input.gs>
function doPost(e){
//データを記録するスプレッドシート
var sheet =SpreadsheetApp.openByUrl("https://スプレッドシートのurlを記入してください/edit#gid=0");
//データ取得
var name = e.parameter.name;
var food = e.parameter.food;
var date = new Date();
//データ
var array = [date,name,food];
sheet.appendRow(array);