Блог

Главная - Вопросы по программированию - Метод JavaScript не вызывается

Метод JavaScript не вызывается

#javascript #prototypejs

#javascript #prototypejs

Вопрос:

я написал ниже скрипт внутри html-файла.

Я прикрепил событие изменения текстового поля с помощью функции FirstName.change и одной функции обновления в классе firstNameInputEditor, который я расширил после создания экземпляра класса 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>

Ответ №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>

Надеюсь, это вам поможет 🙂

Комментарии:

1. Большое спасибо за быстрый ответ. Но я все равно не могу увидеть console.log (‘новое обновление’ событие); на консоли из метода обновления. Я считаю, что вызывается только console.log(событие); .

2. Также я включил prototype.js файл ранее.

3. ох .. дай мне проверить.. однако самая первая ошибка не была добавлена в JQUERY и библиотеку прототипов … я думаю, это решено… итак, позвольте мне проверить console.log(‘новое обновление’ событие); тоже

4. Также, пожалуйста, обратите внимание, что если я вызываю FirstName.change(‘pravin’); вручную в конце сценария вызывается соответствующая функция обновления. Его только через текстовое поле при изменении метода, он не вызывается.

5. Я предполагаю, что проблема с этим ключевым словом. При вызове из скрипта это правильно указывает на класс, который я создал. Но когда вызывается событие 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>
Метки: