DOM要素をグローバル変数として定義できないのはなぜですか？

私はフォームで作業しており、フォーム入力を出力するためにJavascriptを使いたいと思っていました。DOM要素をグローバル変数として定義できないのはなぜですか？

だから私は、スクリプトを次のようしている：

<script> 
function showName() { 
    var box = document.getElementById("lorem").value; 

    console.log(box); 
} 

showName(); 
</script> `

上記のコードは本当にうまく動作しますが、私はそれを再宣言しなくても、他の機能でそれを使用できるようにvar box = document.getElementById("lorem").value;はグローバル変数になりたかったし。

私はこれを持っている場合だから、何も出力されません：、私は間違って何を `

<script> 
//Declared outside the function 
var box = document.getElementById("lorem").value; 

function showName() { 
    console.log(box); 
} 

showName(); 
</script>

やってください！

出典

2017-06-09 Abiodun Adetona

デベロッパーコンソールでエラーが発生しましたか？そうでなければ、 'input＃lorem'は初期値を持っていますか？ – Rajesh

同じものを使用できます。それは問題ではありません。それでもヌルエラーを取得している場合、私は、文書の最後にスクリプトを追加したり、boxの値は

document.addEventListener("DOMContentLoaded", function(event) { 
 
var box = document.getElementById("lorem").value; 
 
function showName() { 
 

 

 
console.log(box); 
 

 
    } 
 
showName(); 
 
});

<input type="text" value="hai" id="lorem"/>

出典

2017-06-09 05:36:28 jafarbtech

以下のようにdocument.addEventListener("DOMContentLoaded", function(event) {ブロックでそれを囲むことをお勧めあなたの宣言時にlorem要素の初期値です。

var box = document.getElementById('lorem'); 

function showName() { 
    console.log(box.value); // <-- get the current value 
} 

// Outputs the current value, initially it will be empty 
// of course, until you change your input and call the 
// function again 
showName();

編集：あなたは、おそらく欲しいのはこれですこれがそう働くあなたの<body>

出典

2017-06-09 05:36:31 mfeineis

あなたのソリューションはかなりうまくいきます。ありがとう。 –

あなたが置くことができるいずれかのスクリプトで最後のスクリプトタグを置くことを確認するためにDOMをロードする必要があり、すべての最後に、<body>タグを閉じるか、@ jafarbtechが示唆しているようにして、DOMコンテンツが読み込まれるまで待機するイベントリスナーを追加してください。

出典

2017-06-09 05:38:14 raychz

イベントリスナーを追加するにはどうすればよいですか？ –

私はそれを理解しました。ありがとう。 –

問題ありません。 DOMがロードされるのを待つ方法の詳細については、https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoadedを参照してください。 – raychz

DOM要素をグローバル変数として定義できないのはなぜですか？

答えて

関連する問題