&引用；未捕获类型错误：未定义不是函数；调用对象中的方法时Javascript中的错误消息

当从HTML中的按钮调用函数时，我遇到了一个问题，该按钮给出了“UncaughtTypeError:undefined不是函数”错误。我认为这里没有什么不对劲。。或者有些事情我没有考虑进去。提前感谢您的回答

我有很多JS文件，这是因为这是一个学校作业，我们现在正在学习模型、视图、控制器（MVC）方法

我有这个按钮：

<button onClick="ControllerBKE.reageerOpKlik()">Ok!</button>

下面是“ControllerBKE”中的一行代码，它应该但不响应按钮：

function ControllerBKE(){
    this.reageerOpKlik = reageerOpKlik;

    function reageerOpKlik(){
        alert('hoi');
    }
}

---

这只是大代码的一小部分。但是当我点击按钮而不是收到带有“hoi”的警报时，会收到错误消息。

reageerOpKlik

是一种实例方法。您必须从实例中使用它。最简单的解决方案（不是最好的）是创建一个全局控制器实例。有很多方法可以消除这个全局变量，但这超出了问题的范围

function reageerOpStart()
{
    window.controllerBKE = new ControllerBKE();
}


<button onClick="window.controllerBKE.reageerOpKlik()">Ok!</button>

函数reageerOpStart（）
{
window.controllerBKE=新的controllerBKE（）；
}
好啊

问题在于您的代码

<button onClick="ControllerBKE.reageerOpKlik()">Ok!</button>

其中，

controllerBKE

是原型的一个实例

但是，您还有另一个问题。职能：

function reageerOpStart()
{
    var controllerBKE = new ControllerBKE();
}

在

reageerOpStart

函数的作用域中创建

controllerBKE

，这意味着它在全局作用域中不可用，这是您的按钮单击处理程序所期望的

您可能需要考虑：

 <button onClick="APP.controllerBKE.reageerOpKlik()">Ok!</button>

 APP = {}
 function reageerOpStart()
 {
     APP.controllerBKE = new ControllerBKE();
 }

好的！
APP={}
函数reageerOpStart（）
{
APP.controllerBKE=新的controllerBKE（）；
}

或者，更好的是：

 <button id="myButton">Ok!</button>

 function reageerOpStart()
 {
     var controllerBKE = new ControllerBKE();
     document.getElementById("myButton").addEventListener("click", function() {
            controllerBKE.reageerOpKlik();
     });
 }

好的！
函数reageerOpStart（）
{
var controllerBKE=新controllerBKE（）；
document.getElementById（“myButton”）.addEventListener（“单击”，函数（）{
controllerBKE.reageerOpKlik（）；
});
}

您所拥有的被称为。您的功能范围有限。也就是说，它只能在定义它的

ControllerBKE（）

内部调用，而不能从函数外部调用

不过，您已经有效地通过

ControllerBKE

实例上的属性公开了该闭包。虽然这是可行的，但将其添加到

ControllerBKE.prototype

中更符合JavaScript的原型结构

记住JavaScript是原型而不是面向对象的，这一点很重要。虽然这可能类似于面向对象的封装，但两者有不同的概念和用途

请看以下示例：

HTML:

<button onclick="controllerBKE.reageerOpKlik()">Ok!</button>

"use strict";
window.controllerBKE = new ControllerBKE();

function ControllerBKE () { }

ControllerBKE.prototype.reageerOpKlik = function () {
    alert('hoi');
}

我已经简化了您的一些代码并对其进行了重构，以支持JavaScript为我们提供的原型对象

第一行是将controllerBKE变量添加到窗口对象。这为它提供了一个跨页面的全局范围，允许您的

onclick

函数访问它

下一行是一个简单的函数包装器。这将创建类型为

object

的

ControllerBKE

的实例

您尝试调用的函数现在已附加到

ControllerBKE

的原型。这意味着使用

new

关键字创建的

ControllerBKE

的任何实例都可以访问此功能

查看下面小提琴中的完整功能：

参考文献：

<button onclick="controllerBKE.reageerOpKlik()">Ok!</button>

"use strict";
window.controllerBKE = new ControllerBKE();

function ControllerBKE () { }

ControllerBKE.prototype.reageerOpKlik = function () {
    alert('hoi');
}

---

作为一个旁注，为了获得良好的实践效果，尝试避免像

OnClick=“

属性这样的内联javascript，而是使用

元素。addEventListener（“click”，function（）{}）

@Lior这听起来像是一个更简单的解决方案，如果我有多个按钮，我将如何为按钮指定该行？@user3775849如果有多个按钮，请在容器上设置onclick（如文档），然后使用event.target找出单击的内容并相应地执行：

document.onclick=function（e）{ControllerBKE.reageerOpKlik（e）；}

并且在reageerOpKlik中使用

e.target

，因为这是单击的对象，除非您使用IE，因为它们使用window.event而不是将事件作为参数传递。有关构造函数、原型和

this

的值的更多信息，请参见此处：@user3775849您可以收听容器上的事件，如HMR write，这是更好的内存方式，或者动态添加元素。如果这些都不是问题（因为这是学校作业），您可以采取更简单的方法，使用带有ID或类的按钮的独特选择器。假设您向该按钮添加一个ID，然后您可以查询该元素

var-okBtn=document.querySelector（“#okBtn”）

然后在事件侦听器中使用它：

okBtn.addEventListener（“单击”，您的\u回调函数）

其中您的\u回调函数是您的回调函数：）谢谢您的帮助，但现在我得到了“Uncaught TypeError:无法读取null的属性'addEventListener'”我完全按照您说的做了。我已将所有代码发布到pastebin:。javascripts在一次粘贴中受影响。我真的希望我犯了一个愚蠢的错误，而且它很容易修复谢谢你的回复！：D但这对我不起作用..：（现在我得到：“Uncaught TypeError:无法读取undefined的属性'reageerOpKlik'”这一定意味着您的代码没有调用

reageerOpstart

。您调试了它吗？是否检查了它是否被调用以及全局是否被设置？@user3775849没有问题。祝您好运，编码愉快！：）