前提
「クリック」の文字を押下すると「クリックされた！」が表示されるプログラムの作成。
以下のエラーがでた。
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"なんて無いって言われている。
終わりに
実行タイミングを理解する必要がある。