I`m learning and training js oop right now but I have an issue. I want to pass a value to property from a constructor by input value.For example if the user want to make his own character , he has to input name , age ,etc etc... but my code fails.Here's my js and html code.I've searched for the answer in the stackoverflow but couldn't find any answers to my question.
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>