javascript - グローバル変数が機能しない

Question

複数の関数で使用できるように保存したい変数があります。私はw3schoolsの指示に従ったが、動作しません。私は何かを忘れていますか？前もって感謝します。

var name = document.getElementById('name').value; 
 

 
function complete() { 
 
document.getElementById('demo').innerHTML = name; 
 
}

Answer 1

考慮すべきいくつかのことがあります：あなたは要素を見つけようとするコードを持っていますが、場合

• その要素がさえ、ブラウザによって読み込まれていないがまだ、ブラウザはそれを見つけることができません。したがって、完全なDOMが にロードされた後にコードが実行されていることを確認してください。これは、bodyタグの直前にスクリプトを置くことによって行われます。
• のページがロードされるとすぐにフォームフィールドの値を取得しようとしないでください。ユーザーが何も入力していないため、 valueは何も表示されません。関数が適切な時刻に呼び出されるようにコードを設定する必要があります（ユーザーがフォームフィールドに入力する機会があった後）、その瞬間が来たときに値を取得するだけです。
• グローバルwindow オブジェクトが空の文字列 にそのデフォルトnameと呼ばれる性質を持っており、あなたがnameにアクセスしようとすると、それは間違ってwindow.nameではなく、あなたの得るために を試みる可能性があるため、任意の要素に名前nameを与えてはいけません要素nameとなります。
• フォームフィールドのみがvalueプロパティを持ちます。他のすべての要素は、 .textContent（文字列は任意のHTMLが含まれていないか、あなたは、実際のHTMLコードを表示する ではなく、解析されたときに使用される）と .innerHTMLを（文字列はHTMLを含まず、あなたはコードが解析されていること をしたいときに使用）があります。

最後に、W3Schoolを使用しないでください。古い情報や間違った情報があることはよく知られています。代わりに、Mozilla Developer's Networkを使用してください。これは、クライアント側のWeb開発ドキュメントのための最良のリソースの1つとして認識されています。

<input type="text" id="userName"> 
 
<input type="button" value="Click Me!" id="btn"> 
 
<div id="demo"></div> 
 

 
<script> 
 
    // Set up the button's click event handling function 
 
    document.getElementById("btn").addEventListener("click", complete); 
 
    
 
    // Only get a reference to the element, not its value because, at this point, 
 
    // the user hasn't had a chance to type anything into it. 
 
    // Also, getting a reference to the element is the best approach because, if 
 
    // you decide you want some other property of the same element later, you'd have 
 
    // to scan the document for the same element again. 
 
    var theName = document.getElementById('userName'); 
 

 
    function complete() { 
 
    // Now, just get the current value of the textbox at this moment in time 
 
    document.getElementById('demo').textContent = theName.value; 
 
    } 
 
</script>