これらの変数をグローバルスコープに入れることができないのはなぜですか？それはローカルでのみ動作します。

Question

以下のコードは、FirstName LastNameはX歳です。しかし、ボタンのクリックでjquery変数のval（）変数を取り出してグローバルにしたい場合、それは機能しません。なぜ私は分からない。

function Household (firstName, lastName, age){ 


    var _list = { 
     "_fname": firstName, 
     "_lname": lastName, 
     "_age": age 
    }; 

this.addPerson = function() { 

    var writeIn = _list._fname + " " + _list._lname + " is " + _list._age + " years old."; 

    return writeIn; 
} 

} 



$('#btnSub').click(function(){ 

    var _getFName = $('#enterFName').val(); 
    var _getLName = $('#enterLName').val(); 
    var _getAge = $('#enterAge').val(); 

    var nuHouse = new Household (_getFName, _getLName, _getAge); 

    var newNuHouse = nuHouse.addPerson(); 

    $('#insertAnswer').html(newNuHouse); 

}); 

なぜこれは機能しませんか？値をグローバルにして、他のボタンクリックでアクセスできるようにしたい。

function Household (firstName, lastName, age){ 


var _list = { 
    "_fname": firstName, 
    "_lname": lastName, 
    "_age": age 
}; 

this.addPerson = function() { 

    var writeIn = _list._fname + " " + _list._lname + " is " + _list._age + " years old."; 

    return writeIn; 
} 

} 

var _getFName = $('#enterFName').val(); 
var _getLName = $('#enterLName').val(); 
var _getAge = $('#enterAge').val(); 

var nuHouse = new Household (_getFName, _getLName, _getAge); 


$('#btnSub').click(function(){ 

    var newNuHouse = nuHouse.addPerson(); 

    $('#insertAnswer').html(newNuHouse); 

}); 

ありがとうございます！

Answer 1

ボタンがクリックされたときではなく、スクリプトの実行時に値が取得されるため、下部コードが機能しません。

引き続き変数をグローバルに宣言することはできますが、代入をイベントリスナーに移すことはできますが、一般的にはグローバルの数を減らすと効果的です。この値をどのように使用するのかわかったら、より良いアプローチを提案することができます。

Answer 2

イベントクリック時にこれらの変数の更新値が必要です。 最初のpageloadでは、これらの入力に値がないためです。

var _getFName; 
var _getLName; 
var _getAge; 

var nuHouse; 


$('#btnSub').click(function(){ 
    _getFName = $('#enterFName').val(); 
    _getLName = $('#enterLName').val(); 
    _getAge = $('#enterAge').val(); 

    nuHouse = new Household (_getFName, _getLName, _getAge); 
    var newNuHouse = nuHouse.addPerson(); 

    $('#insertAnswer').html(newNuHouse); 

});