Question

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

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

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

我想创建firstNameInputEditor的不同实例，它可以具有不同的更新功能实现。并且应该从更改函数内部调用此更新函数。

请帮助

<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>

Answer 1

好吧，好像你没有添加所需的库。

添加以下脚本代码：

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

以下是此工作代码 -

JS小提琴 - 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>

希望这会对您有所帮助：）

Answer 2

管理找到答案。在initilize函数中，我存储了正确的引用并使用它来从更改函数

调用更新函数

<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>

JavaScript方法未被调用

2 个答案: