前提

「クリック」の文字をクリックすると「クリックされた！」に変換するプログラムの作成。
以下のエラーがでた。

Uncaught TypeError: Cannot set properties of null (setting 'onclick')

HTML

<body>
    <div id="text-button"><p id="text">クリック</p></div>
</body>

Javascript

document.getElementById("text-button").onclick = function() {
  document.getElementById("text").innerHTML = "クリックされた！";
};

解決法

以下に変更。

Javascript

window.onload = function () {
  document.getElementById("text-button").onclick = function () {
    document.getElementById("text").innerHTML = "クリックされた！";
  };
};

window.onload = function () とは
ページが完全に読み込まれた直後に実行させたいスクリプトを書く方法である。

原因

 <div id="text-button"><p id="text">クリック</p></div>

が実行される前に

document.getElementById("text-button").onclick = function() {
  document.getElementById("text").innerHTML = "クリックされた！";
};

が実行されているから
document.getElementById("text-button").onclickが
nullになり、エラーが出る。

"text-button"なんて無いって言われている。

終わりに

実行タイミングを理解する必要がある。