Javascript OOP:通过输入向属性传递值失败

我现在正在学习和培训js oop，但我有一个问题。我想通过输入值从构造函数向属性传递一个值。例如，如果用户想要创建自己的角色，他必须输入姓名、年龄等。。。但是我的代码失败了。这是我的js和html代码。我在stackoverflow中搜索了答案，但找不到我问题的任何答案

JS

HTML:

找到Javascript 行动 说出一个名字：

输入年龄：

---

我假设click侦听器执行正确，但first.name和first.age的值为“”。您可以通过在click listener中放置console.log（第一个）来验证这一点

那为什么呢？在触发DOMContentLoaded侦听器时，两个输入都是空的（值=“”）。现在，将这些值复制到Person的实例中。接下来，等待在某个点触发的单击事件，但实例中的name和age的值未更新，因此它们仍然为“”。因此，您设置了PAR..NEnHTML=“`./P>”

---

你需要做的是，你必须重新读取输入的值，并在设置PAR之前更新实例中的变量。您可以通过在click listener中放置console.log（第一个）来验证这一点

那为什么呢？在触发DOMContentLoaded侦听器时，两个输入都是空的（值=“”）。现在，将这些值复制到Person的实例中。接下来，等待在某个点触发的单击事件，但实例中的name和age的值未更新，因此它们仍然为“”。因此，您设置了PAR..NEnHTML=“`./P>”

---

你需要做的是，你必须重新读取输入的值，并在设置PAR之前更新实例中的变量。 我更改了代码，以便

nameInput

和

ageInput

引用元素，然后在

Person

类中获取值，并单击创建

first

看到它工作

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

---

您需要在单击之前从输入中获取值，否则它将使用旧值，这将是一个空字符串

我更改了代码，以便

nameInput

和

ageInput

引用元素，然后在

Person

类中获取值，并单击创建

first

看到它工作

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

---

我的代码失败不是一个有用的控制台错误…我的代码失败不是一个有用的控制台错误…谢谢你的回答：）嘿，顺便问一下，我能再问你一件事吗？为什么当我放置new Person（nameInput.value，ageInput.value）时，它显示undefined undefined，当new Person（nameInput，ageInput）工作时，我不应该用.value读取输入值吗？有点奇怪，为什么behaviorTry会在你的输入中添加value=“”属性，这可能会有所帮助。谢谢你的回答：）嘿，顺便问一下，我能再问你一件事吗？为什么当我放置new Person（nameInput.value，ageInput.value）时，它显示undefined undefined，当new Person（nameInput，ageInput）工作时，我不应该用.value读取输入值吗？有点奇怪，为什么behaviorTry会在您的输入中添加value=“”属性，这可能会有所帮助。谢谢，您帮了我很多！：）上帝保佑你，兄弟。顺便说一句，我能再问你一件事吗？为什么当我输入nameInput.value，ageInput.value时，它显示未定义未定义，我不应该读取输入的值吗？谢谢你，你帮了我很多忙！：）上帝保佑你，兄弟。顺便说一句，我能再问你一件事吗？为什么当我输入nameInput.value，ageInput.value时，它显示未定义未定义，我不应该读取输入的值吗？

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