Pourquoi ma fonction ne fonctionne pas correctement?

Question

Désolé de ne pas donner un titre clair, car je ne sais pas pourquoi mon script ne fonctionne pas.

var all=[]; 
function People(name){ 
    this.name=name; 
    this.func=function(){alert(this.name)}; 
    all.push(this); 
}; 
var person1=new People('Peter'); 
for(i=0;i<all.length;i++){ 
    var newBtn=document.createElement('input'); 
    document.body.appendChild(newBtn); 
    newBtn.type='button'; 
    newBtn.value=all[i].name; 

    newBtn.onclick=all[i].func; // why doesn't is say "Peter" when I click the button ? 
}; 

Btw, existe-t-il un meilleur moyen d'atteindre mon objectif: créer des objets; avec chaque objet, créez un bouton; quand un bouton est cliqué, faites une certaine fonction.

Answer 1

Lorsque vous cliquez sur le bouton, le contexte du gestionnaire d'événements (variable this) devient le bouton lui-même. Vous pouvez le vérifier en mettant simplement console.log(this) à l'intérieur d'un func.
je recommande le code suivant:

for(i=0;i<all.length;i++){ 
    var newBtn=document.createElement('input'); 
    document.body.appendChild(newBtn); 
    newBtn.type='button'; 
    newBtn.value=all[i].name; 

    newBtn.onclick=all[i].func.bind(all[i]); 
}; 

En utilisant bind() vous poussez explicitement le contexte souhaité dans la fonction.
More on bind.

Answer 2

essayez de pousser la personne à tous les objets tableau

var all=[]; 
function People(name){ 
    this.name=name; 
    this.func=function(){alert(this.name)}; 
}; 


var person1=new People('Peter'); 

//push the person objects 

all.push(person1); 

Answer 3

Dans la ligne

this.func=function(){alert(this.name)}; 

remplacer

this.name

juste

name

, puisque vous l'appelez hors de portée, ce qui est différent de votre (c'est le bouton - objet HTMLInputElement).

Answer 4

Essayez ceci: - http://jsfiddle.net/adiioo7/NCTMD/1/

JS: -

var all=[]; 
function People(name){ 
    this.name=name; 
    this.func=function(){alert(name)}; 
    all.push(this); 
}; 
var person1=new People('Peter'); 
for(i=0;i<all.length;i++){ 
    var newBtn=document.createElement('input'); 
    document.body.appendChild(newBtn); 
    newBtn.type='button'; 
    newBtn.value=all[i].name; 

    newBtn.onclick=all[i].func; // why doesn't is say "Peter" when I click the button ? 
}; 

Answer 5

S'il vous plaît vérifier ce code

$(document).ready(function(){ 
    var all=[]; 
    function People(name){ 
     this.name=name; 
     this.func=function(){alert(name)}; 
     all.push(this); 
    }; 
    var person1=new People('Peter'); 

    for(i=0;i<all.length;i++){ 
     var newBtn=document.createElement('input'); 
     newBtn.type='button'; 
     newBtn.value=all[i].name; 
     newBtn.onclick=all[i].func; 
     document.body.appendChild(newBtn); 

    } 
}); 

il une erreur mineure. document.body passe toujours null. Pour ce script, exécutez la fonction document.ready pour obtenir la valeur document.body.