質問：
Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') はUncaught TypeError: Cannot set properties of null (setting 'innerHTML') を意味します。
エラーコード：
出力内容： getElementById.innerHTMLを実行すると、デモの内容が見つからず、書いたHTMLコードを挿入したい場所が見つからない。写真に示すように:
理由を分析します。
この問題には、HTML での Javascript スクリプトのロードと実行が関係しており、ブラウザーは常に HTML DOM 全体を上から下にロードします。タグに記述された js コードは、body タグ全体にさまざまな HTML 要素タグをロードする前であっても、ブラウザのレンダリング エンジンによって実行されます。コードの innerHTML 行が実行されると、次の DOM 構造が読み込まれないため、エラーが報告され、HTML を読み取ることができません。
DOM ドキュメントの読み込み手順:
- HTML 構造を解析する
- 外部スクリプトとスタイルシートを読み込む
- スクリプト コードを解析して実行する
$(function(){})で対応するコードを 実行します- 画像などのバイナリ リソースを読み込む
- ページがロードされたら、実行します
window.onload
解決：
方法 1: js を一番下に置き、ブラウザーが DOM を上から下に完全にロードするのを待ってから、js スクリプトを実行すると、null 参照はなくなります。
コード例:
出力結果:
方法 2:イベント フックwindow.onload を使用し、元の script タグに window.onload を追加し、 DOM を読み込んだ後にブラウザにスクリプトを実行させます。
コード例:
出力結果:
参考リンク：HTML_CassieのブログでJavascriptスクリプトを読み込んで実行する - CSDN博客_htmljsコードを実行する