【GAS】HTML側でスプレッドシートのIDを選択し、関数に引き渡したい。

前提・実現したいこと

Gsuite for educationの環境で次のことをしたいと思っています。

①Googleフォームでアンケートを実施
➁フォームを送信すると、⑴メールアドレスから氏名等を編集用スプレッドシートに追記⑵集計をするため編集用スプレッドシートを編集する。⑴⑵の2つのスクリプトを実行します。（こちらは動作確認ができています。）
➂➁で作成した、編集用スプレッドシートの内容をHTMLで目的のデータを抽出できるようにしたい。（アンケートの提出状況の確認など）

①～➂の工程で、編集用スプレッドシートのIDを
「var myId="編集用スプレッドシートのID"」と1つ固定すれば、目的を達成できました。
しかし、このアンケートは年に何度も行われます。なので、HTML側でスプレッドシートの選択をし、そのスプレッドシートの内容を抽出できるようにしたいです。

・「第一回アンケート」と「第二回アンケート」は別のスプレッドシートで集計します。

myIdへスプレッドシートのIDを上手く取得できないため、エラーメッセージが発生してしまいます。

よろしくお願いいたします。

GAS
1//GAS側のその他の関数はdoGet()はのみです。
2function sheetData(){
3  var element=document.querySelector('qNameId');//<----エラー
4  var myId= element.value;;//<-myIdにHTML側の<select>で選択したスプレッドシートのIDを代入したいです。
5//↓↓以下はmyIdを具体的に１つ指定すれば正常に動作します。
6  var sheet1=SpreadsheetApp.openById(myId).getSheetByName("Sheet1");  
7  var sheet2=SpreadsheetApp.openById(myId).getSheetByName("Sheet2");
8  var sheet3=SpreadsheetApp.openById(myId).getSheetByName("Sheet3");
9  var sheet4=SpreadsheetApp.openById(myId).getSheetByName("Sheet4");
10  var sheet5=SpreadsheetApp.openById(myId).getSheetByName("Sheet5");
11
12  var Array1=sheet1.getRange(1,1,sheet1.getLastRow(),sheet1.getLastColumn()).getValues();
13  var Array2=sheet2.getRange(1,1,sheet2.getLastRow(),sheet2.getLastColumn()).getValues();
14  var Array3=sheet3.getRange(1,1,sheet3.getLastRow(),sheet3.getLastColumn()).getValues();
15  var Array4=sheet4.getRange(1,1,sheet4.getLastRow(),sheet4.getLastColumn()).getValues();
16  var Array5=sheet5.getRange(1,1,sheet5.getLastRow(),sheet5.getLastColumn()).getValues();
17   
18  var results=[Array1,Array2,Array3,Array4,Array5];
19  results = JSON.stringify(results);
20  
21  return results;
22}

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

Uncaught  at sheetData

該当のソースコード

JS
1<script language="javascript" type="text/javascript">
2
3function submission(){
4  google.script.run.withSuccessHandler(function(data){
5    var data = JSON.parse(data);
6//処理
7//処理
8
9  }).sheetData();
10}
11</script>

html
1  <body>
2
3     <p>確認したいアンケートを選択してください。</p> 
4     
5     アンケート選択：
6     <select name="qName" id="qNameId" onchange="submission()">
7       <option>--アンケート選択してください。--</option>
8       <option value="myIdに代入したいスプレッドシートのId➀">アンケート_1</option>
9       <option value="myIdに代入したいスプレッドシートのId➁">アンケート_2</option>
10     </select>
11
12<!-- submission() で処理した内容を表などで表示させます。-->
13
14  <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
15</body>

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

回答1件

ベストアンサー

サーバーサイドでは document オブジェクトは使えません。
呼び出し元(HTML)で必要な値を取得し、sheetData の引数として渡してください。

Code.gs

DIFF
1 //GAS側のその他の関数はdoGet()はのみです。
2-function sheetData(){
3-  var element=document.querySelector('qNameId');//<----エラー
4-  var myId= element.value;;//<-myIdにHTML側の<select>で選択したスプレッドシートのIDを代入したいです。
5+function sheetData(myId){
6 //↓↓以下はmyIdを具体的に１つ指定すれば正常に動作します。
7   var sheet1=SpreadsheetApp.openById(myId).getSheetByName("Sheet1");
8   //(省略)
9 
10   var Array1=sheet1.getRange(1,1,sheet1.getLastRow(),sheet1.getLastColumn()).getValues();
11   //(省略)
12 
13   var results=[Array1,Array2,Array3,Array4,Array5];
14   results = JSON.stringify(results);
15 
16   return results;
17 }

index.html

Diff
1 <!DOCTYPE html>
2 <html>
3   <head>
4     <base target="_top">
5     <title>テスト</title>
6     <script language="javascript" type="text/javascript">
7     function submission(){
8+      const id = document.querySelector("#qNameId").value;      
9       google.script.run.withSuccessHandler(function(data){
10         var data = JSON.parse(data);
11+        document.querySelector("#p").textContent = data;    
12-      }).sheetData();
13+      }).sheetData(id);
14     }
15     </script>
16   </head>
17   <body>
18      <p>確認したいアンケートを選択してください。</p> 
19      アンケート選択：
20      <select name="qName" id="qNameId" onchange="submission()">
21        <option>--アンケート選択してください。--</option>
22        <option value="myIdに代入したいスプレッドシートのId➀">アンケート_1</option>
23        <option value="myIdに代入したいスプレッドシートのId➁">アンケート_2</option>
24      </select>
25+     <p id="p"></p>
26   </body>
27 </html>

投稿2020/10/27 13:52

draq

総合スコア2573

myBeginner

2020/10/28 02:51

draq様ありがとうございました。正常に動作し、目的を達成することが出来ました。なんとなく引数として渡すのではないかとも思ったのですが、書き方がまったくわからず…数日間も悩んでいました。querySelectorは大変勉強になりました。とても丁寧な回答で、初心者の私にも理解しやすかったです。ほんとうにありがとうございました。

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