2016-10-15 4 views
2

J'ai écrit le script ci-dessous dans le fichier html.La méthode JavaScript n'est pas appelée

J'ai attaché l'événement de changement de la zone de texte avec la fonction firstName.change et une fonction de mise à jour dans la classe firstNameInputEditor que j'ai étendue après avoir créé l'instance de la classe firstNameInputEditor.

Maintenant, le problème est que lorsque l'événement de modification est appelé, ma fonction de mise à jour n'est pas appelée.

Je veux créer une instance différente de firstNameInputEditor qui peut avoir une implémentation différente de la fonction de mise à jour. Et cette fonction de mise à jour devrait être appelée en interne à partir de la fonction de changement.

aider Veuillez

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

Répondre

1

Eh bien, il semble que vous croirez pas ajouté bibliothèque nécessaire.

AJOUTZ code de script:

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

est Ci-dessous le code de travail pour 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>

En espérant que cela vous aidera :)

+0

Merci beaucoup pour une réponse rapide. Mais je ne suis toujours pas capable de voir console.log ('new update' + event); sur la console à partir de la méthode de mise à jour. Je crois seulement console.log (événement); est appelé. –

+0

J'ai également inclus le fichier prototype.js plus tôt. –

+0

ohk .. laissez-moi vérifier .. cependant très première erreur n'a pas été ajouté JQUERY et bibliothèque de prototypes ... qui est résolu je suppose ... alors laissez-moi vérifier à propos de console.log ('nouvelle mise à jour' + événement); aussi –

0

Géré pour trouver la réponse. Dans la fonction initilize je stocke la référence correcte et l'utiliser pour appeler la fonction de mise à jour de la fonction de changement

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