Question

目标：我正在尝试将值从输入传递给返回对象的构造函数

问题：我得到的回报是“未定义” 我认为它可能与我的onclick有关，我的按钮也许我说的不对。我真的不确定。我在互联网上看了一眼找不到答案。

的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>

Answer 1

您undefined，name和age state内的peron获得person因为您未通过{{1}点击按钮时的任何内容：

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

（以这种方式致电person时，由于您尚未使用undefined和{{new，因此您也可以回复person。 1}}没有return x语句。但我认为你的意思是参数，因为你没有查看返回值。）

您的JavaScript代码显示您在其他地方调用它是正确的（除了在JavaScript名称¹中获取大写的标准做法之外）：

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

如果您将所有JavaScript代码（获取值，调用new person等）包装到一个新函数中，比如createPerson，并调用它，那么它将在很大程度上起作用：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

¹您显然可以自由地在自己的代码中执行您喜欢的操作，但绝大多数情况下，JavaScript中的约定是构造函数函数（您调用的函数）通过new）以大写字母开头，基本上没有其他变量。因此，构造函数为Person（不是person），引用新人的变量为newPerson（不是NewPerson）。

附注：onxyz - 属性样式的事件处理程序对于快速和脏的模型很方便，但它们有几个问题，尤其是它们调用的函数必须是全局的，而全局变量是坏的事情™。确保您熟悉现实事件处理，以便在真实应用中使用addEventListener等。

Answer 2

您没有在点击处理程序中将任何参数传递给person()。

尝试以下方法：

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>

将值从输入传递给返回对象的构造函数

2 个答案: