[JS]dotinstall/#24addEventListener

Question

#24 イベントを設定してみよう

ドットインストールの上記の回を参考にローカルで実行してみましたところ、
Uncaught TypeError: Cannot read property 'addEventListener' of null
というエラーが出ました。
綴り間違いなのか、書き方が間違っているのか色々探ってみたのですが何故エラーになってしまうのか分かりません。
どなたかわかる方がいらっしゃいましたらご教授頂けると幸いでございます。

// buttonのidを取得する
document.getElementById('add')
 .addEventListener('click',function(){
  // 追加する要素とテキストを格納
    var greet = document.createElement('p');
        text  = document.createTextNode('hello, world');
  // 要素とテキストを追加する
    document.body.appendChild(greet).appendChild(text);
});

    <button id="add">Click</button>

※ファイル自体は読み込むことが出来ています。

Answer 1

取り敢えず問題になっていた
Uncaught TypeError: Cannot read property 'addEventListener' of nullについて

参考URL
【javascript】addEventListenerなどのイベントについて

• 問題

headタグの中でjsファイルを読み込んでいたが、
上から順に処理されるため、id='add'が見つからないのでnullになっていた。

• 解決

headタグの中で読み込んでいたjsファイルをbodyタグの中の一番下へ持ってくる
（取得したいidより後でjs処理させる）

もっと上級者になれば他の解決方法があるのかもしれませんが
一旦これで解決。

---

追記　:　headタグの中でもちゃんとjsが処理してくれる方法

jsファイルはheadタグの中でないと何となく気持ち悪いのでもっと調べた結果、
まずはbody要素内全てを読み込んだ後に処理させれば良いということが分かりました。

// body要素内のすべてを読み込む
window.onload = function() {
  var add = document.getElementById('add');
  add.addEventListener('click', function(){
     var greet = document.createElement('p');
     var text  = document.createTextNode('hello, world');
     document.body.appendChild(greet).appendChild(text);
  });
}

Answer 2

var greet = document.createElement('p');
    text

ここで、('p')の後がセミコロンで終わってますが、「,」です。変数textにvarなりが適用されていない状態です。上記の書き方なら、

var greet = document.createElement('p');
var text...

こう書く必要があります。

連続して定義する場合は、

var greet = document.createElement('p'),
    text ....

こういう感じですね。

動作サンプル
では、特にエラーはでていないようですけれども。

Comments

[star24star]

何と…本当ですね！
「,」の書き方はあまり慣れていないので普通に
var greet = document.createElement('p');
var text = document.createTextNode('hello, world');
と書くことにしました。しかし未だエラー内容は解決せず…。
idが取得できていないのでしょうか…；

[star24star]

すみません…自己解決しました。
javascriptの読み込む順番をちゃんと理解していなかったようです。
varのご指摘及びご回答、ありがとうございました！