Skip to main content
document.write についての 情報を追加
ソース リンク
user18851
  • 1,238
  • 8
  • 6

ページ全体の DOM 作成が完了する前に DOM の操作をしようとしているので ちゃんと動作しないようです。
jQeury だとよく

$(function() {
 /* DOM を操作する処理 */
})

という書き方をしますが、ちょうDOM 操作できる ちょうどいいくらいのタイミングで
DOM 操作できる処理が呼ばれるようになってから 呼び出さ工夫さています。

今回の場合は

<script src="myChart.js"> </script>
<script>
    window.addEventListener('load', function() {
        console.log('myChart.js started')
        getCsvData();
        console.log('myChart.js completed')
    });       
</script>

と、処理を開始するタイミング を遅くしたら 予期した動作になりました。

DOM 構築前でも

<script>
    document.write("<tr><td>1</td></tr>");
</script>

とすれば HTML を直接出力できるのですが、
csv ファイルを読み込み完了まで待ち合わせる事ができないので
今回のパターンでは使えないと思います。

ページ全体の DOM 作成が完了する前に DOM の操作をしようとしているので ちゃんと動作しないようです。
jQeury だとよく

$(function() {
 /* DOM を操作する処理 */
})

という書き方をしますが、ちょうどいいくらいのタイミングで
DOM 操作できるようになってから 呼び出されます。

今回の場合は

<script src="myChart.js"> </script>
<script>
    window.addEventListener('load', function() {
        console.log('myChart.js started')
        getCsvData();
        console.log('myChart.js completed')
    });       
</script>

と、処理を開始するタイミング を遅くしたら 予期した動作になります。

ページ全体の DOM 作成が完了する前に DOM の操作をしようとしているので ちゃんと動作しないようです。
jQeury だとよく

$(function() {
 /* DOM を操作する処理 */
})

という書き方をしますが、DOM 操作できる ちょうどいいくらいのタイミングで
処理が呼ばれるように工夫さています。

今回の場合は

<script src="myChart.js"> </script>
<script>
    window.addEventListener('load', function() {
        console.log('myChart.js started')
        getCsvData();
        console.log('myChart.js completed')
    });       
</script>

と、処理を開始するタイミング を遅くしたら 予期した動作になりました。

DOM 構築前でも

<script>
    document.write("<tr><td>1</td></tr>");
</script>

とすれば HTML を直接出力できるのですが、
csv ファイルを読み込み完了まで待ち合わせる事ができないので
今回のパターンでは使えないと思います。

ソース リンク
user18851
  • 1,238
  • 8
  • 6

ページ全体の DOM 作成が完了する前に DOM の操作をしようとしているので ちゃんと動作しないようです。
jQeury だとよく

$(function() {
 /* DOM を操作する処理 */
})

という書き方をしますが、ちょうどいいくらいのタイミングで
DOM 操作できるようになってから 呼び出されます。

今回の場合は

<script src="myChart.js"> </script>
<script>
    window.addEventListener('load', function() {
        console.log('myChart.js started')
        getCsvData();
        console.log('myChart.js completed')
    });       
</script>

と、処理を開始するタイミング を遅くしたら 予期した動作になります。