如何使用按钮从类中调用方法？答案

【问题标题】：How to call a method from a class using a button?如何使用按钮从类中调用方法？
【发布时间】：2021-03-10 15:19:31
【问题描述】：

我收到一个参考错误“addCharacter not defined”。不确定我需要改变什么？目标是当用户输入姓名和年龄时，点击提交，它将字符保存到数组中。这是我目前所拥有的：

<input id="inputName" type="text" placeholder="Name" value="John">
<input id="inputAge" type="text" placeholder="Age" value="20">
<button onclick="addCharacter()">Submit</button>

//Create Class
class Character {
  name = document.getElementById("inputName").value;
  age = document.getElementById("inputAge").value;

  //Method
  addCharacter = () => {
    let characterList = [];
    characterList.push(this.name, this.age);
    console.log(characterList);
  };
}

//Store instance in variable
const myCharacter = new Character();

//Execute
myCharacter.addCharacter();

https://codepen.io/lacheporter/pen/jOVQmqp?editors=1111

【问题讨论】：

这是一个类，所以试试addCharacter() { ... 另外，你正在调用onclick="addCharacter()"，但你没有在任何地方定义这个函数。它是类中的方法
您不能从 onclick 处理程序调用addCharacter。该方法不是全局的，需要 Character 类的实例。
看看否决票我认为这是一个糟糕的问题？我对编程和绝对课程有点陌生。但是你回答了我的问题，所以我会在重写后发布我的答案。我只是在调用一个不存在的函数，认为它确实存在于类中，作为一种方法。感谢您为我指明正确的方向！
@lache 不客气，很高兴为您提供帮助。

标签： javascript class button methods

【解决方案1】：

我只是把它变成了一个可以做我想做的事情，所以我希望它可以帮助其他人。我正在为可以用简单函数完成的事情创建一个类。它主要用于学习目的。不确定我是否在课堂上看到了重点？

<input id="inputName" type="text" placeholder="Name" value="John">
<input id="inputAge" type="text" placeholder="Age" value="20">
<button onclick="addCharacter()">Submit</button>

let characterList = [];


function addCharacter(){

 let name = document.getElementById("inputName").value;
 let age = document.getElementById("inputAge").value;

characterList.push(name, age);
console.log(characterList);
 
}

【讨论】：

类有利于代码的组织和划分。该类在此特定实例中没有用。