JavaScript~クイズゲーム修正1回目~

JSのクイズゲームでエラーがでたので、先生に質問しました。

問題のコードがこれです。↓↓

エラーを起こすときは、
問題をスタートして、ラジオボタンが表示されて、問題に答えるためにラジオボタンにクリックしたときに、change is not definedになりました。

理由としては、HTMLのフォームのラジオボタンの要素に、onchange=”change(this.value)” としていることが原因でした。

これの何が原因かというと、ブラウザでJSが読み込まれる際に、DOMを生成してからJSが読み込まれます。HTMLにonchangeが記載されているため、ここでJSが発動し、index.jsが読み込まれる前に、onchangeが発動するためのエラーでした。

なので、これの解決方法として
・HTMLにonchangeを書くのではなく、index.jsにaddEventListernerを使い、設定する
ここでもうひとつ疑問に思ったのが、
index.jsが読み込まれる前に発動しているのなら、<head>内にindex.jsを入れればいいのでは？と考えました。

しかし、これは、getElementByIdが読み込まれる前、つまり、DOMを生成する前に、読み込まれるため、エラーがおきます。
この解決策が、前回記事にした、DOMContedLoadedです。

LoadがDOMを含め、画像など全ての外部ファイルなどを読み込むまで起動しないのに対して
DOMContedLoadedは、DOMを読み込んで、記載されている関数を読み込みます。

これを使うことで、getElementByIdが読み込みエラーを起こさずに、JSを読み込むことができます。

以上です。

もりけん塾
 もりけん先生ブログ