尝试获取用户输入时未定义

Question

在下面的代码笔中，我试图从输入字段中获取文本。 然后我试图从该数据创建一个 object。 即使我在我的事件侦听器中返回它，我也没有为 userData 定义。

class Name {
  constructor(name) {
    this.name = name;
  }
}

const getUserData = (function() {
  
    let userInput = document.getElementById('name').value;

    return { name: userInput};

})();

document.getElementById("btn").addEventListener("click", function (event) {
    event.preventDefault();
    const userData = getUserData();
});

console.log(userData);
const nameObj = new Name(userData);
console.log(nameObj);

Answer 1

 class Name { constructor(name) { this.name = name; } } const getUserData = function() { let userInput = document.getElementById('name').value; return { name: userInput}; }; document.getElementById("btn").addEventListener("click", function (event) { event.preventDefault(); const userData = getUserData(); console.log(userData); const nameObj = new Name(userData); console.log(nameObj); });

 #btn { height: 30px; width: 100px; background-color: blue; color: white; text-align: center; display: flex; justify-content: center; align-items: center; margin-top: 5px; }.form-container { padding: 10px; }

 <form id="test-form"> <div class="form-container"> <input id="name" type="name" name="name" placeholder="type your name here"> <div id="btn">Click Me</div> </div> </form>