AjaxでHTMLドキュメントの制御

Question

###前提・実現したいこと
Ajax で外部csvファイルからtableを作り、trタグの表示・非表示を制御したいと思っています。
document.getElementById("trID0").style.display = "";しようとするとDOMがキャッチできずエラーになります。
###発生している問題・エラーメッセージ
エラー: 未定義または NULL 参照のプロパティ 'style' は取得できません。
###該当のソースコード
createTable.js

window.onload = function() {
  function getText(path) {
    var request = new XMLHttpRequest();

    request.open("GET", path, true);
    request.setRequestHeader('Pragma', 'no-cache');
    request.setRequestHeader('Cache-Control', 'no-cache');
    request.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
    request.onreadystatechange = function() {

      if (request.readyState === 4 && request.status === 200) {
        var type = request.getResponseHeader("Content-Type");
        if (type.match(/^text/))
          parseCSV(request.responseText);
      }
    };
    request.send(null);
  }
  function parseCSV(str) {
    var LF = String.fromCharCode(10);
    var csvData = new Array();
    var lines = str.split(LF);

    for (var i = 0; i < lines.length; i++) {
      var cells = lines[i].split(",");
      if( cells.length != 1 ) csvData.push(cells);
    }
    var divId = document.getElementById('result');
    var table = document.createElement('table');
    table.id = 'data';
    divId.appendChild(table);
    var tbody = document.createElement('tbody');
    tbody.id = 'tbodyID';
    table.appendChild(tbody);

    for (var i = 0; i < csvData.length; i++) {
      var tr = document.createElement('tr');
      tr.id = 'trID' + i;
      for (var j = 0; j < csvData[i].length; j++) {
        var td = document.createElement('td');
        td.innerHTML = csvData[i][j];
        tr.appendChild(td);
      }
      tbody.appendChild(tr);
    }
  }
  getText('./myMusic.csv');
}

```controlTable.js
```ここに言語を入力
document.getElementById("trID0").style.display = "";

###試したこと
defer 属性をつけてみましたが改善しません。

<script defer src="./controlTable.js"></script>

###補足情報(言語/FW/ツール等のバージョンなど)

Answer 1

関数parseCSVが実行されたタイミングでイベントを発砲するなり、コールバック関数を渡しておくなりするか、setTimeoutで読み込みを待つかどちらかではないでしょうか。

【JavaScriptでsetTimeoutを使う方法【初心者向け】 | TechAcademyマガジン】
https://techacademy.jp/magazine/5541

Answer 2

function displayBlock() {
document.getElementById("trID0").style.display = "";
}
setTimeout(displayBlock, 1000);

setTimeout でできました。イベント、コールバック関数についてはこれから勉強したいと思います。

Timeoutを実装して10秒待っても完了しないときは abort()を呼び出しリクエストを中止する。
window.onload = function() {
function getText(path, timeout) {
var request = new XMLHttpRequest();
var timeout = false;

　　var timer = setTimeout(function() {
timeout = true;
request.abort();
}, 10000);

　　request.open("GET", path, true);

　　request.onreadystatechange = function() {
if (request.readyState !== 4) return;
if (timeout) return;
clearTimeout(timer);
if (request.status === 200) {
var type = request.getResponseHeader("Content-Type");
if (type.match(/^text/))
parseCSV(request.responseText);
}
};
request.send(null);
}

愚鈍な小生にコーディングのサンプルなどご教示いただければ幸いです。

Comments

[guest1213]

あなたの環境では1秒後にajax通信が終わってDOMの構築が終わっているかもしれませんが、
インターネットの向こうなど離れた環境では終わっていないかもしれません。
逆にとても高速で、100ミリ秒で終わるような環境であっても900ミリ秒も余計にまたされてしまいます。
非同期処理をsetTimeoutで待ってから終わっているものとみなすというのはやめた方がいいです。