2016-10-15 6 views
2

Я написал ниже скрипт внутри html-файла.Метод JavaScript не набирается

У меня есть событие изменения текстового поля с функцией 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

Ну, кажется, что вы havn't добавили необходимую библиотеку.

Добавить ниже код сценария:

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

Ниже рабочий код this-

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>

Надеемся, что это вам поможет :)

+0

Большое спасибо за быстрый ответ. Но все же я не могу видеть console.log («новое обновление» + событие); на консоли из метода обновления. Я считаю, что только console.log (event); получает вызов. –

+0

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

+0

ohk .. позвольте мне проверить .. однако очень первая ошибка не была добавлена ​​JQUERY и библиотека прототипов ... это разрешено, я думаю ... поэтому позвольте мне проверить about console.log («новое обновление» + событие); тоже –

0

Удалось найти ответ. В функции 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> 
Смежные вопросы