Javascript OOP: Übergabe eines Werts an die Eigenschaft durch Eingabe fehlgeschlagen

Question

Ich lerne und Ausbildung js oop jetzt aber ich habe ein Problem. Ich möchte einen Wert an Eigenschaft von einem Konstruktor durch Eingabewert übergeben. Zum Beispiel wenn der Benutzer seinen eigenen Charakter bilden will, muss er Name, Alter, usw. eingeben usw. aber mein Code versagt. Hier ist mein js und html code.Ich habe im stackoverflow nach der Antwort gesucht, konnte aber keine Antworten auf meine Frage finden.

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

Sie müssen den Wert aus der Eingabe bei Klick nicht vorher nehmen, sonst wird der alte Wert verwendet, der eine leere Zeichenfolge wäre.

verweise ich den Code so nameInput und ageInput auf die Elemente geändert und der Wert wird dann innerhalb der Person Klasse holen und first auf Klick erstellt.

See JSFiddle zu sehen, es funktioniert.

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

Ich würde davon ausgehen, dass der Klick-Listener korrekt ausgeführt wird, aber die Werte von first.name und first.age sind ''. Sie können dies überprüfen, indem Sie eine console.log-Datei (zuerst) in den Klick-Listener einfügen.

Also warum ist das? Zu dem Zeitpunkt, zu dem der DOMContentLoaded-Listener ausgelöst wird, sind beide Eingaben leer (Wert == ''). Jetzt kopieren Sie diese Werte in eine Instanz von Person. Als Nächstes warten Sie auf angeklickte Ereignisse, die zu einem bestimmten Zeitpunkt ausgelöst werden, aber der Wert von Name und Alter in Ihrer Instanz wurde nicht aktualisiert, sodass sie immer noch "" sind. Du hast also par.innerHTML = '' gesetzt.

Sie müssen die Werte Ihrer Eingaben erneut lesen und die Variablen in Ihrer Instanz aktualisieren, bevor Sie par.innerHTML setzen.