GetElementByIdの返り値について

GetElementByIdを用いて、divタグのオブジェクト、値を外部のjsファイルから取得したいのですが、返り値がnullとなってしまいます。ファイルは以下の様に作成しました。

htmlファイル
<div id='test'>test</test>

jsファイル
var element = GetElementById('test');
var s = element.getAttribute('id');
console.log(test);
console.log(s)


jsファイルを用いずに1つのファイルで記述を行った場合はそれぞれの返り値が、
element:［object］
s:test

であったのに対し、ファイルを分けると
element:null
となってしまいました。
どこがおかしいのでしょうか？

No.1 ベストアンサー 回答者： fujillin 回答日時： 2016/06/27 12:50

こんにちは

HTMLの中で、<script>タグで外部jsファイルを読み込んでいるのですよね？

ご提示のコードで気になるのは
＞console.log(test);
タイポかも知れませんがelementを出力したいのでは？
testだと、まぁ、nullではなくundefinedで返ってくるような気はしますが…

＞jsファイルを用いずに1つのファイルで記述を行った場合は～～
1つのファイルの場合も<script>タグで記述していると想像しますが、外部ファイル化した際にタグの位置を変えたりしていませんか？
ブラウザがHTMLをパースして、該当するオブジェクトを認識するよりも前にスクリプトを実行すると、（まだオブジェクトが存在しないので）null値が返されます。

この可能性が高そうな気がしますが…？

この回答へのお礼

外部ファイル化したときにファイルの位置を変えていました……。

元の位置に戻したらちゃんと値が返ってきました。
ありがとうございました。

お礼日時：2016/06/27 14:34

No.3 回答者： naktak 回答日時： 2016/06/27 14:09

×GetElementById()

○getElementById()
です。

大文字小文字は区別されます。
JavaScriptの場合、CamelCaseと呼ばれる命名記法に則り、命令の最初の単語はすべて小文字というルールのもとに命令が定義されています。

No.2 回答者： Ogre7077 回答日時： 2016/06/27 13:10

jsファイルの中身が、HTMLの構築が終わった後に実行されるように、

以下のように記載しましょう

document.addEventListener('DOMContentLoaded', function(){
...中身...
}, false);