Javascript &引用；未捕获类型错误：无法读取属性'；绑定&x27；“未定义”的定义；关于p5.js

我使用p5.js与精灵进行按钮交互。我有一个关于通过for循环创建按钮的快速问题。我知道我可以很容易地为4个按钮中的每一个创建单独的对象，但我想看看它是如何以这种方式工作的，只是为了缩短代码

我想让每个按钮调用一个函数“puton（I）”，在for循环中使用递增的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.
}

var帽子、衬衫、裤子、鞋子；
函数设置（）{
createCanvas（500300）；
背景（155）；
var costs=[“Hat”、“Shirt”、“Pants”、“Shoes”]；//只是为了让代码干净。
对于（变量i=0；i

.mousePressed（）

将函数作为其参数，而不是函数调用。 官方文件中有一个很好的例子：

这在您的情况下适用：

change.mousePressed(puton);

甚至这个：

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

.mousePressed（）

将函数作为其参数，而不是函数调用。 官方文件中有一个很好的例子：

这在您的情况下适用：

change.mousePressed(puton);

甚至这个：

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