getElementById取得時にvalueも

質問

<p>金額 <input type="text" id="price" value="9000"></p>

のようなhtmlがありjavascriptファイルの中で
変数price に一行でpriceIDの中のvalueを代入することはできないのでしょうか。

直感的には
var price = document.getElementById('price').value;
で良いように思うのですがエラーが出ます。

var priceForm = document.getElementById('price');
var price = priceForm.value;
とやる必要があるみたいなのですが、何故なのでしょうか。
そういう仕様なのはわかるのですが何故こんな仕様なのでしょうか。
私の考えがjqueryとごっちゃになっているのでこんな考えに至るのでしょうか。
よろしくお願いします。

回答No.1

t_ohta · ベストアンサー

var price = document.getElementById('price').value;
でも問題ありません。

出ているエラーは「TypeError」ではありませんか？
そうだとすると実行するタイミングの問題です。
ブラウザは、HTMLの先頭から順に解釈を始め、実行していきます。
「document.getElementById('price')」を実行する時点で、「<input type="text" id="price" value="9000">」のレンダリングが終わっていないと「price」と言うIDが見付けられないため「document.getElementById('price')」の実行結果は「null」が出てきます。
「null」に「value」プロパティは存在しないのでエラーになります。

なので、JabaScriptの記載位置を「body」の後に持ってくるか、
==========
var price = null;
window.addEventListener('load', function(){
price = document.getElementById('price').value;
});
==========
として、ページの読み込みが完了してから実行するようにしましょう。

お礼

ありがとうございました。
参考にさせていただきます。