Passing Values from input to constructor function that returns a object

Question

Goal: I'm trying to pass values from input to constructor function that returns an object

Problem: All I get in return is "undefined" I think it may have to do with my onclick that is on my button maybe I'm not calling it right. I'm really not sure. I have looked all over the internet an can't find the answer.

JavaScript

var name = document.getElementById('inputValueName').value;
var age = document.getElementById('inputValueAge').value;
var state = document.getElementById('inputValueState').value;

function person(name, age, state) {
    this.name = name;
    this.age = age;
    this.state = state;
}
var NewPerson = new person(name, age, state);

console.log(NewPerson);

HTML

<input type="text" id="inputValueName">
<input type="text" id="inputValueAge">
<input type="text" id="inputValueState">
<button id="btn" onclick="person();">Add</button>

T.J. Crowder · Accepted Answer · 2017-01-31T15:25:13.413

You're getting undefined for name, age, and state within peron because you're not passing person anything when you click your button:

<button id="btn" onclick="person();">Add</button>
<!-- Where are the arguments? ---^            -->

(When calling person that way, you'll also get back undefined as the result of the call, since you haven't used new and person doesn't have a return x statement. But I assume you mean the parameters, since you're not looking at the return value.)

Your JavaScript code showing you calling it elsewhere is correct (other than getting standard practices around capitalization in JavaScript names¹):

var NewPerson = new person(name, age, state);

If you wrapped up all your JavaScript code (getting the values, calling new person, etc.) into a new function, say createPerson, and called that instead, it would largely work:

function createPerson() {
  var name = document.getElementById('inputValueName').value;
  var age = document.getElementById('inputValueAge').value;
  var state = document.getElementById('inputValueState').value;

  function person(name, age, state) {
    this.name = name;
    this.age = age;
    this.age = age;
    this.state = state;
  }
  var NewPerson = new person(name, age, state);

  console.log(NewPerson);
}

<input type="text" id="inputValueName">
<input type="text" id="inputValueAge">
<input type="text" id="inputValueState">
<button id="btn" onclick="createPerson();">Add</button>

¹ You're obviously free to do what you like in your own code, but overwhelmingly, the convention in JavaScript is that constructor functions (ones you call via new) start with a capital letter, and basically no other variables do. So it would be Person (not person), for the constructor, and newPerson (not NewPerson) for the variable referencing the new person.

Side note: onxyz-attribute-style event handlers are handy for quick-and-dirty mockups, but they have several problems, not least that the functions they call have to be globals, and globals are a Bad Thing™. Make sure you familiarize yourself with modern event handling for use in real apps, addEventListener and the like.

+1, but I think your first sentence is wrong because he didn't specify the `new` keyword before `person` — smarber, Jan 31 '17 at 15:21
@smarber: Depends on where he/she was getting `undefined`. I was thinking he/she meant within the function as the value of the parameters `name` and such, since he/she's not using the return value, so wouldn't be seeing the `undefined` that calling `person` without `new` would result in. I can clarify it. — T.J. Crowder, Jan 31 '17 at 15:23
@T.J.Crowder Could you give me some good reading on modern usages of event handing? Thanks for the feedback I will take your advise to heart — Cory Kelly, Jan 31 '17 at 16:55
@CoryKelly: See [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) and if you need to support obsolete browsers, see also [this answer](http://stackoverflow.com/questions/23799296/js-li-tag-onclick-not-working-on-ie8/23799448#23799448) here on SO. — T.J. Crowder, Jan 31 '17 at 16:58

score 0 · Answer 2 · answered Jan 31 '17 at 15:21

You didn't pass any parameters to person() in your click handler.

Try the following:

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

function createPerson () {
    var name = document.getElementById('inputValueName').value;
    var age = document.getElementById('inputValueAge').value;
    var state = document.getElementById('inputValueState').value;

    var NewPerson = new person(name, age, state);
    return NewPerson;
}

HTML

<button id="btn" onclick="createPerson();">Add</button>

return to onclick? what should that do? may console.log(createPerson()) — Jonas Wilms, Jan 31 '17 at 15:29

Passing Values from input to constructor function that returns a object

2 Answers2