在输入 oninput 中调用 javascript 方法作为回调

Question

我正在编写一个网页，当用户输入给定方程的除一个输入值之外的所有值时，它将求解一个方程。我创建了一个 javascript 类，其中包含从 html 输入字段中读取数值然后解决缺失值的方法。

我可以使用独立函数作为回调，例如：

<input oninput="read_t()">

但是当我尝试调用定义为类方法的相同函数时，例如：

<input oninput="equation.read_t()">

我收到以下错误：

Uncaught TypeError: equation.read_t is not a function

    at HTMLInputElement.oninput

我创建了一个名为“方程式”的类的实例。所以我不确定我是否在输入标记中错误地调用了该方法，或者在 html/javascript 中根本不允许这种事情。

我不确定我是否需要将回调作为类的一部分包含在内，或者只是使其成为一个独立的函数：这是有效的。在类中包含回调似乎更简洁。我想知道实例方法是否可以是回调，或者我是否犯了其他错误。

任何帮助表示赞赏！

更新：我添加了一个精简版的页面以供检查。我不确定在过去几个小时的工作中我做了什么更改，但是现在在输入字段中输入文本时会执行实例方法。但是，我发现输入文本没有wien按预期分配给实例的属性。这让我困惑了一段时间，因为赋值应该是一个非常基本的操作。然后我无意中发现and和方法this是指输入元素, , and ，而不是类实例。我想我不明白如何read_tread_wcalculatewien_twien_wwien_solvewienthis在这种情况下表现。我原以为这些实例方法会引用实例本身——因为它们被定义为 ClassWien 中的方法——而不是它们作为 EventListeners 添加到的 DOM 元素。

Answer 1

我尝试复制您的问题，似乎使用 static 将使您能够调用类中的函数，而不使用它会导致您遇到错误。html<input type="text" oninput="equation.read_t()"/>Javascriptclass equation {&nbsp; &nbsp; constructor() {&nbsp; &nbsp; }&nbsp; &nbsp; static read_t() {&nbsp; &nbsp; &nbsp; &nbsp; console.log("Hello");&nbsp; &nbsp; }}静态方法允许您调用类本身的方法。

Answer 2

也许您需要使用 objectName.functionName() 而不是 className.functionName() 来调用它例如下面的格式给了我同样的错误方程。读取不是一个函数<input type="text" id="myInput" oninput="equation.read()">但以下格式工作正常<input type="text" id="myInput" oninput="equationObject.read()">这是我在脚本标签中写的代码class equation{&nbsp; &nbsp; read(){&nbsp; &nbsp; &nbsp; &nbsp; var x = document.getElementById("myInput").value;&nbsp; &nbsp; &nbsp; &nbsp; console.log(x);&nbsp; &nbsp; }}equationObject = new equation();

Answer 3

使用方法绑定的事件处理通常比oninput.请参阅 Mozilla 文档：https ://developer.mozilla.org/en-US/docs/Web/API/EventListener这是一个快速的总结：设置 id 属性。初始化方程类。将方法绑定到输入事件。