GASでスプレッドシートをHTMLでフォーム化

GASでシートのデータをhtmlで表示、操作できるをことを知り、勉強中です。
Javascriptを実行し、エラーの詳細がよく分かりません。

プルダウン２つを連携したい。

シートを1つ目のプルダウンで選択
→選んだシートからデータを読み取る
→それを２つめのプルダウンにしたい。

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

1つ目のプルダウンで選択後、send_work 実行→ get_work を実行するのですが、
その結果、get_work がうまく働かず、withFailureHandler の no_dateが実行されてしまいます。

chromeのコンソールで確認すると、以下のエラーがでています。

Uncaught ReferenceError: date is not defined
    at send_work (userCodeAppPanel:5:54)
    at HTMLSelectElement.onchange (userCodeAppPanel:1:1363)

get_workでreture dateしているのですが、渡せていないようです。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3
4<head>
5  <base target="_top">
6
7  <script>
8    function send_work(){
9      let obj = document.getElementById("select_sheet");
10      alert("obj=" + Number(obj.value));
11      google.script.run.withSuccessHandler(work_list)     //ここがうまく動かない元のプログラム
12      .withFailureHandler(no_date())
13      .get_work(obj);
14    };
15
16    function work_list(date){
17      alert("work_list ON!");
18      var selObj = document.getElementById('select_work');
19      while(selObj.lastChild){
20        selObj.removeChild(selObj.lastChild);
21      }
22      for(var i=0;i<date.length;i++){
23        let op = document.createElement("option");
24        op.value = date[i].cd;
25        op.text = date[i].label;
26        selObj.appendChild(op);
27      }
28    }
29    
30    function no_date(){
31      alert("dateがありません")
32    }
33    
34  </script>
35</head>
36
37<body>
38  <h1>セレクトアプリ</h1>
39  <table style="text-align: left; width: 100%;" cellpadding="5" cellspacing="5">
40    <tbody>
41      <tr>
42        <td style="vertical-align: middle;" width="20%" class="sorth one">シートを選択→</td>
43        <td style="vertical-align: middle;" >
44          <select id="select_sheet"  width="50%" onchange="send_work()">   //シートを選択するとsend_workを実行する
45            <option value="0">▼シートを選択</option>
46            <option value="1">シート1</option>
47            <option value="2">シート2</option>
48            <option value="3">シート3</option>
49          </select>
50        </td>
51      </tr>
52      <tr>
53        <td style="vertical-align: middle;" class="sorth two">項目選択→</td>
54        <td style="vertical-align: middle;" >
55          <select id="select_work" class="select" name="select_works">
56            <option>1番目</option>      //ダミーです
57            <option>2番目</option>
58            <option>3番目</option>
59        </select>
60          <br>
61        </td>
62      </tr>
63      <tr>
64        <td style="vertical-align: middle;" class="sorth three">
65          新規項目を追加
66        </td>
67        <td style="vertical-align: middle;" width="30%"><input name="add" >
68          <button id="add_button" name="add_button" type="button" style="width:20%;padding:2px;font-size:15px;">追加</button><br>
69        </td>
70      </tr>
71    </tbody>
72  </table>
73</body>
74</html>

gs
1コード.gs
2function doGet() { 
3  return HtmlService.createTemplateFromFile("index").evaluate(); 
4}
5
6//シート名選択から提出物名を反映　　　　　　　←ここがうまく動いていないらしい。
7function get_work(obj){
8  var ss = SpreadsheetApp.getActiveSpreadsheet();
9  var sheet = ss.getSheets()[ Number(obj)-1 ];
10  //最終列取得
11  var last_col = sheet.getRange(1, sheet.getMaxColumns()).getNextDataCell(SpreadsheetApp.Direction.PREVIOUS).getColumn();
12  var date = sheet.getRange(1, 1, 1, last_col).getValues()[0];
13  return date;
14};
15

試したこと

function get_work(obj)を引数をなくし、var obj = 1とすると、シートデータを読み取れることは確認しています。

javascriptとGASのgsコードのやりとりがうまくいかないのだと思います。
いろいろ検索しましたが、解決方法が見つかりません…。
すいませんが、お知恵を貸してください！

修正したコード

qnoirさんのアドバイスで解決しました。
以下、修正したコードです。

html
1    function send_work(){
2      let obj = document.getElementById("select_sheet");
3      alert("obj=" + Number(obj.value));
4      google.script.run.withSuccessHandler(work_list)     //work_listの引数を削除
5      .withFailureHandler(no_date)　　　　　　　　　　　    //no_dateの()を削除
6      .get_work(obj.value);　　　　　　　　　　　　　　　　　//.valueを追加
7    };
8
9　 function work_list(date){
10                 ...
11        op.value = i;　　　　　　　　//そもそもcdとかなかった…
12        op.text = date[i];
13                 ...

冷静に考えれば、.valueを付け忘れたり、簡単な間違いもありました…。
けど、1人で考えても見つけられなかったので、本当に助かりました。

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

回答1件

ベストアンサー

すくなくとも、コード.gs の

js
1      google.script.run.withSuccessHandler(work_list(date)) 
2      .withFailureHandler(no_date())
3      .get_work(obj);

を

js
1      google.script.run.withSuccessHandler(work_list) 
2      .withFailureHandler(no_date)
3      .get_work(obj.value);

に直してください。

ポイント

withSuccessHandler/withFailureHandler には関数を渡す（関数の評価結果ではない）
withSuccessHandlerの前に実行させるGAS側の関数には引数としてJavaScript のプリミティブ型しか渡せません。（なので obj [オブジェクト]ではなく、 obj.value（数値）を渡す）

参照→ https://developers.google.com/apps-script/guides/html/reference/run#parameters

残り、コード.gsのget_workで

js
1  var date = sheet.getRange(1, 1, 1, last_col).getValues()[0];
2  return date;

としている一方

index.html で

js
1 op.value = date[i].cd;
2 op.text = date[i].label;

としている部分も（仮にそのままであれば）うまく動かない原因ですが、要件が明らかになっていない以上修正できません。
（「var obj = 1とすると、シートデータを読み取れることは確認しています。」とのことから、実際に動かしているコードは質問文とまた異なるのでしょう）

投稿2022/12/11 10:42

編集2022/12/11 11:21

退会済みユーザー

総合スコア0

hiro04kon

2022/12/11 11:27

ありがとうございます！ withSuccessHandler()がうまく動作しない理由が分かりました！また、op.～は、その前がうまくいがず、動作確認していませんでした。訂正したら直りました！ありがとうございます！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

GASでSpreedsheetをhtmlフォーム化、javascriptからgsコードの値のやりとり

GASでスプレッドシートをHTMLでフォーム化

プルダウン２つを連携したい。

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

該当のソースコード

試したこと

修正したコード

ポイント

関連した質問