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

Javascript OOP: Passing a value to property through input fails

本文关键字：值传 属性 失败 输入 OOP Javascript      更新时间：2023-11-17

我现在正在学习和训练js-op，但我遇到了一个问题。我想通过输入值将值从构造函数传递到属性。例如，如果用户想制作自己的角色，他必须输入姓名、年龄等……但我的代码失败了。这是我的js和html代码。我在stackoverflow中寻找答案，但找不到任何问题的答案。

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>

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

那为什么呢？在触发DOMContentLoaded侦听器时，两个输入都为空（值=="）。现在，您将这些值复制到Person的实例中。接下来，您等待在某个时刻触发的单击事件，但实例中的name和age值没有更新，因此它们仍然是"。所以您设置了par.innerHTML=''。

您需要做的是，在设置par.innerHTML.

之前，必须再次读取输入的值并更新实例中的变量

您需要在点击时从输入中获取值，否则它将使用空字符串的旧值。

我更改了代码，使nameInput和ageInput引用元素，然后在Person类中获取值，并在单击时创建first。

请参阅JSFiddle以查看其工作情况。

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;  
});
相关文章：