在输入 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()"/>

Javascript

class equation {

    constructor() {

    }

    static read_t() {

        console.log("Hello");

    }

}

静态方法允许您调用类本身的方法。

Answer 2

也许您需要使用 objectName.functionName() 而不是 className.functionName() 来调用它

例如

下面的格式给了我同样的错误方程。读取不是一个函数

<input type="text" id="myInput" oninput="equation.read()">

但以下格式工作正常

<input type="text" id="myInput" oninput="equationObject.read()">

这是我在脚本标签中写的代码

class equation{

    read(){

        var x = document.getElementById("myInput").value;

        console.log(x);

    }

}

equationObject = new equation();

Answer 3

使用方法绑定的事件处理通常比oninput.

请参阅 Mozilla 文档：https ://developer.mozilla.org/en-US/docs/Web/API/EventListener

这是一个快速的总结：

1. 设置 id 属性。

2. 初始化方程类。

3. 将方法绑定到输入事件。