JavaScript 方法没有被调用答案

【问题标题】：JavaScript method is not getting calledJavaScript 方法没有被调用
【发布时间】：2017-02-24 19:35:41
【问题描述】：

我在 html 文件中编写了下面的脚本。

我在类 firstNameInputEditor 中附加了带有 firstName.change 函数和一个更新函数的文本框的更改事件，我在创建类 firstNameInputEditor 的实例后扩展了该函数。

现在的问题是当更改事件被调用时，我的更新函数没有被调用。

我想创建不同的 firstNameInputEditor 实例，它可以有不同的更新函数实现。并且这个更新函数应该在 change 函数内部调用。

请帮忙

<html>
    <head>
        <title>
            User Resgistration for
        </title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
    </head>

    <body>
        <form id ="myForm">
            First Name <input type="text" id = "firstName" onchange = "firstName.change(event)"/></br>
        </form>
        <script type="text/javascript">
            var firstNameInputEditor = Class.create({
                initialize: function(id) {
                    this.elementId = id;
                    this.elementId.onchange = this.change;
                },

                update :function(event){
                    console.log('outside update', event);
                },

                change : function(event){
                    this.update(event);
                    console.log('change update', event);
                }
            });

            var firstName = new firstNameInputEditor($('firstName'));

            firstName.update = function(event){
                console.log('new update' + event);
            }

        </script>
    </body>
</html>

【问题讨论】：

标签： javascript prototypejs

【解决方案1】：

嗯，看来你还没有添加所需的库。

添加以下脚本代码：

<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>

下面是这个的工作代码-

JS Fiddle-https://jsfiddle.net/vikash2402/ce75kdr9/3/

var firstNameInputEditor = Class.create({
 initialize: function(id) {
    this.elementId = id;
    this.elementId.onchange=this.change;
  },

  update :function(event){
},

    change : function(event){   
    this.update(event);
    alert("value changed");
    console.log(event);
}
});

var firstName = new firstNameInputEditor($('firstName'));
firstName.update =function(event){
  console.log('new update' + event);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
<body>
<form id ="myForm">

First Name <input type="text" id = "firstName" onchange = "firstName.change(event)"/></br>

</form>
</body>

希望这会对您有所帮助 :)

【讨论】：

非常感谢您的快速回复。但我仍然看不到 console.log('new update' + event);在更新方法的控制台上。我相信只有 console.log(event);正在被调用。
我之前也包含了prototype.js文件。
ohk.. 让我检查一下.. 但是第一个错误没有添加 JQUERY 和 Prototype 库......我猜这已经解决了......所以让我检查一下 console.log('new update ' + 事件）；太
另外请注意，如果我打电话给 firstName.change('pravin');在脚本结束时手动调用正确的更新函数。它仅通过更改方法上的文本框不会被调用。
我猜这个关键字的问题。当从脚本调用时，它正确指向我创建的类。但是当 on change 事件被调用时，它指向文本框。我们怎样才能解决它？？？

【解决方案2】：

设法找到答案。在初始化函数中，我存储了正确的引用并使用它从更改函数中调用更新函数

<html>
<head><title> User Resgistration form</title></head>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>

<body>
<form id ="myForm" actiion="\resgistrationFormAction.jsp">

First Name <input type="text" id = "firstNameId" /></br>

</form>
</body>
<script type="text/javascript">

var firstNameInputEditor = Class.create({
 initialize: function(id) {
    this.elementId = id;
    this.elementId.onchange=this.change;
    that= this;
  },

  update :function(event){
  },

    change : function(event){       
    that.update(event);
    console.log(event);
}
});

var firstName = new firstNameInputEditor($('firstNameId'));
firstName.update =function(event){
  console.log('new update' + event);
}


</script>
</html>

【讨论】：