"Uncaught TypeError: Не удается прочитать свойство 'bind' undefined" на p5.js

Question

Я использую p5.js для использования взаимодействий кнопок со спрайтами. У меня просто есть быстрый вопрос о создании кнопок с помощью for-loops. Я знаю, что я могу легко создавать отдельные объекты для каждой из 4 кнопок, но я хотел посмотреть, как это будет работать таким образом, чтобы сделать код короче.

Я хочу, чтобы каждая кнопка вызывала одну функцию «puton (i)» с приращением i в цикле for, так что каждая кнопка может делать что-то другое (что в моем случае накладывает на другую одежду). Но, я получаю эту ошибку:

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); 
});