javascriptのgetElementByIdについて

Question

javascriptで
getElementByIdを使ってオブジェクトの取得を試みているのですが
nullが返ってきてしまいます

原因は何でしょうか。

以下コードです

<div class="container">
    <div id="target">
      5.000
    </div>
    <div id="result">
      0.000
    </div>
    <div class="buttons">
      <div id="start">
        Start
      </div>
      <div id="stop">
        Stop
      </div>
    </div>
</div>

(function() {
  'use strict';

  console.log("hogehoge");

  var start = document.getElementById('start');
  var stop = document.getElementById('stop');
  var result = document.getElementById('result');
  var startTime;

  console.log(start);

  if(start!=null){
    start.addEventListener('click', function() {
      startTime = Date.now();
    },false);
  }

  if(stop!=null) {
    stop.addEventListener('click', function() {
      var elapsedTime;
      elapsedTime = (Date.now() - startTime) / 1000;
      result.textContent = elapsedTime;
    }, false);
  }
})();

コンソールに値が出力されていることから、関数自体は呼ばれているのですが
startに値がはいってくれません

ご教授よろしくお願いします

Answer 1

scriptタグを</body>直前に移動させてください。

Comments

[kohekoh]

動きました
どういう原理なのでしょうか

[kei344]

head部分でscriptを読み込んでいる場合、ページの要素はまだ出来ていません。（存在しません）
一般的に提示した方法か、ロードを待つ（DOMContentLoadedイベントを待つ）方法かどちらかを採ります。

[kohekoh]

なるほど！
ありがとうございます！

[x_x]

</body>ですね

[kei344]

To: x_xさん
指摘ありがとうございます、修正しました。