Javascript OOP：入力を介してプロパティに値を渡すのに失敗しました

Question

今はjs oopを学習してトレーニングしていますが、問題があります。私は入力値でコンストラクタからプロパティに値を渡したいと思います。たとえば、ユーザが自分のキャラクタを作成したい場合、名前、年齢などを入力する必要があります。しかし、私のコードは失敗します。これは私のjsとhtmlです私はstackoverflowでの答えを探していたが、私の質問への答えを見つけることができませんでした。

JS

document.addEventListener("DOMContentLoaded", function() { 

    var button = document.getElementById('action'); 
    var nameInput = document.getElementById('charName').value; 
    var ageInput = document.getElementById('age').value; 
    var par = document.getElementById('result'); 

    function Person(name,age){ 
     this.name = name; 
     this.age = age; 
    } 

    var first = new Person(nameInput,ageInput); 

    button.addEventListener('click',function(){ 
     par.innerHTML = first.name + ' ' + first.age; 
    }); 


}); 

HTML：

<h1>Javascript Found</h1> 
     <button id="action">Action</button> 
     <div id="holder"> 
      <p> 
       Give a name:<input type="text" id="charName" placeholder="Enter a name"> 
      </p> 
      <p> 
       Enter age: <input type="text" id="age" placeholder="Enter a number(0-100)"> 
      </p> 
      <p id="result"></p> 
     </div> 

Answer 1

クリックの入力から値を取得する必要があります。それ以外の場合は、空の文字列になる古い値が使用されます。

私はそうnameInputとageInputコードを変更するには、要素を参照し、値がPersonクラス内でフェッチされ、firstをクリックの上に作成されます。

See JSFiddle

var button = document.getElementById('action'); 
var nameInput = document.getElementById('charName'); 
var ageInput = document.getElementById('age'); 
var par = document.getElementById('result'); 

function Person(name,age){ 
    this.name = name.value; 
    this.age = age.value; 
} 

button.addEventListener('click',function(){ 
    var first = new Person(nameInput, ageInput); 
    console.log(first); 
    par.innerHTML = first.name + ' ' + first.age; 
}); 

Answer 2

私は、クリックリスナーが正しく実行されることを前提としていますが、first.nameとfirst.ageの値は '' です。クリックリスナーにconsole.log（最初）を入力することで確認できます。

、なぜそれがありますか？ DOMContentLoadedリスナーがトリガーするとき、両方の入力が空です（値== ''）。さて、これらの値をPersonのインスタンスにコピーします。次に、ある時点でトリガーされたクリックされたイベントを待つが、インスタンス内の名前と年齢の値は更新されていないため、まだ ""です。したがって、par.innerHTML = ''を設定します。

あなたがする必要があるのは、par.innerHTMLを設定する前に、入力の値をもう一度読み込んでインスタンスの変数を更新する必要があることです。