javascriptファイルを複数使ったらwindow.onloadが利かなくなった

お絵かきアプリをメモあぷりと合体

このあいだ作ったブラウザ上でお絵かきができるアプリ。

単体で使っても良いですが、以前から愛用しているメモアプリ（ちょいメモ）と合体させることにしました。

: fabric.jsを使ったシンプルなお絵かきWebアプリ

fabric.jsライブラリを使ってブラウザ上でさくっとお絵かきができるwebアプリを作りました

続きを見る

: お絵かきアプリにブラシサイズと色が反映されるドットカーソルを追加した

自作のお絵かきWebアプリを使いやすくするために、現在のブラシサイズと色が分かるドットカーソルを作ってみました

続きを見る

: 一番使ってる自作アプリ、保存できないメモ「ちょいメモ」

ちょっとテキストを書いたりコピペしたいんだけど、エディタやワープロを立ち上げるのもかったるい。というときにブラウザ上でさくっとメモが取れるWebアプリです。保存機能がないが特徴。単純なコードなので欲しい機能は自分でどんどん追加できます

続きを見る

単に合体させても邪魔なので，ラジオスイッチでお絵かきエリアの表示・非表示ができるようにしました。

ちょいメモはhtmlだけで書いていましたが、この機会にjavascriptとcssを別ファイルにしました。

html側で、main.jsとdraw.jsを読み込めばオッケー、、のはずでしたが、これが動かない。

お絵かきは動くのですが、テキストのメモ機能がうんともすんとも言いません。

コンソールにもエラーがでていません。

デバッグ用のconsole.logを挿入してみるとまったく動いてない様子。

試しにdraw.jsを無効にしてみると動作が復活しました。

どうやら何かが干渉しているようです。

draw.jsとmain.jsのふたつのコードを眺めていて、ふと「あれ、もしかしたらwindows.onloadって一回しか使えないの？」

と思ってググってみたら、そのものズバリの話がありました。

そんなわけで、

window.onloadを

document.addEventListener('DOMContentLoaded', function()

に書き換えて解決しました。

あちこちに知識の穴があるなぁと思った一件でした

そんなわけでメモ帳アプリにお絵かきが合体して用途が広がりました。

機能が増えても使い勝手が変わらないところは我ながら気に入っています。