0

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>
1
  • my code fails is not a useful console error...
    – smnbbrv
    Apr 3, 2016 at 10:49

2 Answers 2

2

I would assume that the click listener is executed correctly, but the values of first.name and first.age are ''. You can verify that by putting a console.log(first) in the click listener.

So why is that? At the time your DOMContentLoaded listener triggers, both your inputs are empty (value == ''). Now, you copy these values into an instance of Person. Next, you wait for clicked events which are triggered at some point but the value of name and age in your instance were not updated so they are still "". So you set par.innerHTML = ' '.

What you need to do is, you have to read the values of your inputs again and update the variables in your instance before you set par.innerHTML.

3
  • Thank you for your answer :) Apr 3, 2016 at 11:00
  • Hey, btw can I ask you one more thing? why when I put new Person( nameInput.value, ageInput.value), it shows undefined undefined , shouldn't I read the value of the input with .value , when it's new Person(nameInput, ageInput) works? kinda strange why is that behavior Apr 3, 2016 at 11:13
  • Try to add a value="" attribute to your inputs, that might help. Apr 3, 2016 at 11:15
1

You need to grab the value from the input on click not before that otherwise it will use the old value which would be an empty string.

I changed the code so nameInput and ageInput refer to the elements and the value is then fetch inside the Person class and first is created on click.

See JSFiddle to see it working.

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;  
});
2
  • Thank you , you helped me a lot ! :) God Bless you brother. Apr 3, 2016 at 11:00
  • btw can I ask you one more thing? why when I put nameInput.value, ageInput.value, it shows undefined undefined , shouldn't I read the value of the input? Apr 3, 2016 at 11:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.