前提・やりたいこと

google スプレッドシートに出力しているデータを用いてwebページ上に動的な表を作りたいと考えています。下に現在作成中の画面を提示いたします。

また、データソースとしているスプレッドシートは下の画像です。
この画像のA32要素を記載したページの太郎/ここにスプシの~の部分に反映をさせたいと考えています。なお、A32要素はGASのdoGet関数でwebアプリとしてデプロイしている状態です。

アプリ構成の関係でhtmlファイルはスプレッドシートのスクリプトエディタでは作っておらず、ローカルファイルです。
スプレッドシートの値を外部のhtmlファイルに直接渡す方法は無いと聞いたためアプリとしてデプロイしています。デプロイ後に渡されるurlにアクセスすることで次の結果が得られました。

#(追記)問題・エラーメッセージ
エラーは下の通り出ました。表上のここに～の部分をid="dt"で指定するとこの結果が返って狙った処理ができません。しかし、テスト(target)の部分をid="target"で指定するとしたの画像のように出るため、tdタグに対する指定の方法を考えています。

Uncaught (in promise) TypeError: Cannot set property 'textContent' of null
    at table.js:8

#ソースコード

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>test</title>
6    <meta name="viewport" content="width=device-width, initial-scale=1" />
7    <link rel="stylesheet" href="page.css">
8    <link rel="stylesheet" href="reset.min.css">
9    <link rel="stylesheet" href="style.css">
10    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
11    <link href="https://unpkg.com/tabulator-tables@4.1.4/dist/css/tabulator.min.css" rel="stylesheet">
12    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.1.4/dist/js/tabulator.min.js"></script>
13    
14  </head>
15  <body>
16
17    <header class="site-header">
18      ～～略～～
19    </header>
20    <div class="main-wrapper">
21      <h1 id="target">テスト(id="target")</h1>
22      <h1 class="section-title">患者データ</h1>
23      
24      <table id="student-table">
25        <thead>
26          <tr>
27            <th>氏名</th>
28            <th>最終更新日時</th>
29            <th>ステータス</th>
30          </tr>
31        </thead>
32        <tbody>
33          <tr>
34            <td>太郎</td>
35            <td id="dt">ここにスプレッドシートの値を挿入したい</td>
36            <td>in</td>
37          </tr>
38          <tr>
39            <td>次郎</td>
40            <td></td>
41            <td>out</td>
42          </tr>
43          <tr>
44            <td>三郎</td>
45            <td></td>
46            <td>in</td>
47          </tr>
48        </tbody>
49      </table>
50
51      <script src="table.js"></script>
52      <script type="text/javascript">
53        var table = new Tabulator("#student-table", {
54          layout:"fitColumns",
55          movableColumns:true,
56          columns:[
57          {title:"氏名", field:"name"},
58          {title:"最終更新日時", field:"daytime"},
59          {title:"ステータス", field:"status"},
60          ],
61        });
62
63
64      </script>
65        
66    </div>
67
68    <footer>
69      ～～略～～
70    </footer>
71  </body>
72</html>

js
1'use strict';
2      const url = "GASのAPIURL"
3      fetch(url , {
4        method: "GET",
5      }).then(response => response.text())
6      .then(text => {
7        console.log(text);
8        //dtをtargetにした場合は成功(テスト(target)が10月06日_17:08に書き換わった)
9        document.getElementById('渡したい場所のid').textContent = text;
10      });
11

GAS
1var SHEET_NAME = "シート１";
2function getValue() {
3  var ss = SpreadsheetApp.openById(SpreadsheetApp.getActiveSpreadsheet().getId());
4  var sheet = ss.getSheetByName(SHEET_NAME);
5  var lastrow = sheet.getLastRow()-1;
6  var box = [];
7  
8//  return sheet.getRange(lastrow,1,1,1).getValue();
9  var value = sheet.getRange(lastrow,1,1,1).getValue();
10  return JSON.stringify([{datetime: value}]);
11   
12}
13
14function doGet(e) {
15  return ContentService.createTextOutput(getValue()).setMimeType(ContentService.MimeType.TEXT);
16}

上から、html、javascript、GASのコードです。一部省略しています。
main-wrapper内のtargetというidはテーブル外部であればデータを参照することができるかと考えたときのテストです。コメントにもありますがその場合は参照ができていました。
エラメのtable.jsというのは上記のjavascriptです。

#考え
上記のエラーメッセージと、テーブル外部のidに対してはtextContentができていたためtdタグに対してid属性をつけることができないのかと考えましたが、調べた限りはできるようです。
Tabulatorではこういったことはできないのかと考え色々と調べてはいますが、同様のことをしている方がほとんどおらず解決できませんでした。

どう改良すれば狙い通りに動いてくれるかご教示願いたいと思います。こういうことじゃないか、という推測だけでも大変助かります。
初学者であるため拙い状況説明ですがどうぞよろしくお願いいたします。

#(追記20201113)渡したidのパターンごとの結果
ご指摘を受け以下を追記します。画像ばかりで長くなりますがご了承ください。
上から2つのパターンにおけるhtmlの書き換えはなく、table.jsのgetElementByIdの引数のみを変更しています。

scriptのgetElementById("target")の場合
この場合は想定通りの動作をします。コンソールにエラーもありません。

scriptのgetElementById("dt")の場合
下の画像の通りここに～の部分が変化しておらずコンソールにも同様のエラーが出ています。

htmlのtable内外にstatusという同じidを2つつけ、それを引数として渡した場合
この場合はtable外部のidにのみ値が反映されていて、コンソール上にエラーもありませんでした。

html
1 <div class="main-wrapper">
2      <h1 id="target">テスト(id="target")</h1>
3      <h1 class="section-title">患者データ</h1>
4      <h1 id="status"></h1> //ここと
5      <table id="student-table">
6        <thead>
7          <tr>
8            <th>氏名</th>
9            <th>最終更新日時</th>
10            <th id="status">ステータス</th>　//ここ
11          </tr>
12        </thead>
13        <tbody>

以上のことから、スコープの問題？と考えますが全く解決に至りません...。
ご意見お願いいたします。

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

回答1件

ベストアンサー

<td id="dt">が複数あります。
同じIDを指定することはできません。

追記

Uncaught (in promise) TypeError: Cannot set property 'textContent' of null
    at table.js:8

このエラーは、document.getElementById('dt')で要素が取得できないときに出るエラーです。

あなたの言う通り、document.getElementById('target')で<h1 id="target">が書き換わるなら、問題なく取得できそうです。（私は提示いただいたHTMLとJSで問題なく実行できました）
再度、どのスクリプトで成功して、どのスクリプトで問題なのかご確認お願いいたします。

投稿2020/11/12 05:18

編集2020/11/12 23:27

macaron_xxx

総合スコア3191

noah_is_over

2020/11/13 02:42 編集

回答ありがとうございます。おなじID属性は複数与えることはできないのですね。ですが、試行錯誤している際、dtが一つの場合も試しましたが同様の結果でしたので原因はそれだけではないようです。追記いくつかパターンを挙げて実行してみました。画像が多く冗長になっていますが再度ご覧いただけますでしょうか。行ってみた感触では、table内部へidの指定ができていない様子です。他の回答を頂くため上に記載したソースコードはdtを一つに修正しておきます。ご指摘ありがとうございました。

macaron_xxx

2020/11/13 07:49

tableの中だから参照できないということはないです。 https://codepen.io/macaron_xxx/details/xxOmobL ちなみに「htmlのtable内外にstatusという同じidを2つつけ、それを引数として渡した場合」のパターンの場合、先に取得したidにしか適応されないので、正常な動きです。 id同じの2つは違反なんですが、動きとしては正常なので、エラーもでないのです。その時にHTML側の<h1 id="status"></h1>を削除するとどうなりますか？

noah_is_over

2020/11/17 04:14 編集

返答遅くなり申し訳ございません。 codepenで示していただいた通りのことは確かにできることを確認しました。そのうえで、おっしゃられた部分を削除しstatusのidをtable内部のみに改変しましたが、[ここにスプレッドシートの～]の部分は変化せず、エラーも出ませんでした。大変申し訳ないのですが、今週中の解決が見込めなければ一度jqueryをつかっての動的な表づくりは保留としたいと考えています...。

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