"Uncaught TypeError：p5.jsの 'undefined of bind'プロパティを読み取ることができません

Question

私はp5.jsを使用してスプライトとのボタンのやりとりを使用しています。私はfor-loopsを使ってボタンの作成について簡単に質問しています。私は4つのボタンのそれぞれに別々のオブジェクトを簡単に作成できることを知っていますが、コードを短くするためにこの方法がどのように機能するのか見たいと思っていました。

私は、それぞれのボタンが（私の場合は別の服を着ている）何かをすることができるように、ボタンをforループにインクリメントされたiで1つの関数 "puton（i）"と呼ぶようにします。しかし、私はこのエラーを取得する：

Uncaught TypeError: Cannot read property 'bind' of undefined. 

は、私は本当にあまりにもよくパラメータはJavaScriptでどのように機能するかを理解していないので、私は、これはひどく間違っ近づいている可能性があり、そうより効果的なアプローチにいくつかの洞察力は、（ほかのハード各コーディングボタン）も評価されます。

ありがとうございます！

var hat, shirt, pants, shoes; 

function setup(){ 
    createCanvas(500, 300); 
    background(155); 

    var clothes = ["Hat", "Shirt", "Pants", "Shoes"]; // Just to make the code clean. 
    for(var i = 0; i < clothes.length; i++){ 
     var change = createButton('Put on ' + clothes[i]); 
     change.position(10, i*30 + 60); 
     change.mousePressed(puton(i)); 
    } 
} 

function puton(i){ 
    console.log(i); //To test, "0" gets printed, but after that it crashes. 
} 

Answer 1

.mousePressed()は、関数呼び出しではなく関数としてパラメータをとります。 良い例は、公式ドキュメントにあります：https://p5js.org/reference/#/p5.Element/mousePressed

これはあなたのケースで動作します：

change.mousePressed(puton); 

あるいはこの：

change.mousePressed(function(e) { 
    console.log(e); 
}); 

を