JS - 変数のDOM要素を保持

Question

私は自分自身を混乱させるので、いくつかの明確化が必要です。我々は、次のコードを持っているとしましょう：

var textarea = document.getElementById("myTextarea"); 
var button = document.getElementById("myButton"); 

button.addEventListener("click", function() { 
    var words = textarea.value; 
console.log(words); 
} 

このコードは、最初に、それぞれの変数にDOM要素（ボタンやテキストエリア）を収集することによって実行されます。コードの後半で、ボタンが押されると、変数wordsにtextarea.valueが配置されます。十分な公正？

私の質問はなぜコンソールに何も記録されていないのですか？ textarea変数は、ページがロードされた後にDOMから作成され、格納されます。これは、ユーザーがテキストエリアに何かを書き込む時間がかかっているよりも前になります。これは、textarea.valueが、ボタンがユーザによって押されたときのテキストエリアの文字列とは対照的に、''（何もない）に等しくなければならないことを意味します。

誰かが私のためにこれをクリアすることができればそれは非常に感謝します。

おかげで:)

Answer 1

これは、ボタンがユーザによって押された時点で、テキストエリア内の文字列とは対照的に、textarea.valueは、''（何も）等しくてはならないことを意味します。

Nope！

入力要素のプロパティは、ユーザー入力やそれを変更する他のコードに基づいて動的に更新されます。 valueプロパティにアクセスすると重要です。ボタンをクリックしたときにアクセスするため、ボタンをクリックすると要素に設定された値が読み込まれます。

場合は、このような何かをしたが：

var textarea = document.getElementById("myTextarea"); 
var words = document.getElementById("myButton").value; 

button.addEventListener("click", function() { 
    console.log(words); 
} 

そして、値が（おそらく空白であることが、デフォルト値であること、および変数を自動保存、または何か他のものは、それが設定された可能性が先に読み込まれます〜以前）、ユーザーによる変更は無視されます。

Answer 2

2 jsfiddlesを見てください。 first一

<input id = "myTextarea"/> 
<button id= "myButton" type="submit"> test </button> 
var textarea = document.getElementById("myTextarea"); 
var button = document.getElementById("myButton"); 
button.addEventListener("click", function() { 
    var words = textarea.value; 
    console.log(words); 
}); 

、あなたは、クリックのイベント内のテキストエリアの値をキャプチャしています。したがって、既に入力されている値を取得します。 secondフィドルで

<input id = "myTextarea"/> 
<button id= "myButton" type="submit"> test </button> 
var textarea = document.getElementById("myTextarea"); 
var button = document.getElementById("myButton"); 
button.addEventListener("click", function() { 
    console.log(words); 
}); 

、あなたはすぐにDOMが起こるためにクリックイベントを待たずにロードされる値をキャプチャしています。したがって、コンソールに表示される値は空白です。

したがって、イベントが発生した後、またはDOMがロードされた直後に、値のキャプチャ時に入力値が表示されるかどうかは異なります。お役に立てれば。