javascript , html :変数スコープについて

Question

javascriptの変数スコープについてわからないことがあります。
下記は文字列を連結させる処理なのですが、

var res = document.getElementById("result");
の部分が関数内にある場合、うまく行くのですが、
グローバル変数として関数の外で定義するとうまくいきません。

どなたかお助け願います。

top.js
////////////////////////////////////////////////
Total = 0;
Input = "";
myCalc = "+";
Flg = 1;
log = "";
** var res = document.getElementById("result");**

function inputData(myData){
var rand1 = String(myData);
if(Flg == 0){
Flg = 1;
log = rand1;
}else{
log = log + rand1;
}
res.value = log;
}

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。また、「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」をお書きください。（両方のソースを追記するのも手段です）

Answer 1

再現コードが開示されてないので推測になりますが…。

getElementById は対応する要素ノードが見つからない時に null を返します。
従って、グローバル変数化する際に対象の要素が読み込まれなかった場合は期待通りに動作しません。
</body> の手間でスクリプトコードを実行するか、DOMContentLoaded のタイミングで getElementById を呼び出せば解消すると思われます。

Re: YoshidaYuhei さん