p5.js点击生成按钮时报错Uncaught TypeError: t is undefined

你代码的问题主要出在3个地方：

• 按钮点击事件绑定错误：button.mousePressed(generator.draw()) 直接调用了generator.draw()方法，会在setup执行阶段就立刻运行，而不是点击按钮时触发。mousePressed方法要求传入函数引用作为参数，而非函数执行的返回值。
• 输入校验逻辑错误：
  • 校验逻辑写在仅执行一次的setup函数中，页面加载时用户还未输入内容，校验永远不会触发，后续用户输入新值也不会更新generator实例
  • 校验时直接拿输入框DOM对象和0做比较，没有读取输入框的value属性，判断逻辑永远不成立
  • 输入框返回的value是字符串类型，直接传入要求数值参数的Room_map构造函数会引发逻辑错误
• 生成逻辑未和点击事件绑定：当前更新generator的逻辑只在页面加载时执行一次，用户点击按钮时只会调用旧实例的draw方法，不会用新输入的参数重新生成内容

1. 把参数读取、校验、实例生成、绘制的逻辑全部封装到独立的回调函数中，绑定给按钮的点击事件
2. 读取输入值后先转为数值类型，再做校验和传参
3. 给mousePressed传入函数引用而非直接执行函数
4. 可以在setup末尾添加noLoop()，关闭p5.js默认的draw循环，避免未定义draw函数引发的警告

function setup() {
    createCanvas(1280, 512);
    // 初始化输入框
    input_no_of_rooms = createInput();
    input_no_of_rooms.position(1100, 50);

    input_min_size = createInput();
    input_min_size.position(1100, 90);

    input_max_size = createInput();
    input_max_size.position(1100, 130);
    // 绑定按钮点击事件，传入函数引用
    button = createButton('Generate');
    button.position(1100, 155);
    button.mousePressed(generateMap);

    background(200);
    push();
    fill(0);
    text("Number of rooms: ", 1095, 40);
    text("Min room size: ", 1095, 80);
    text("Max room size: ", 1095, 120);
    pop();
    // 关闭默认draw循环
    noLoop();
}

// 独立的生成逻辑回调函数
function generateMap() {
    // 读取输入值并转为数字
    const roomCount = parseInt(input_no_of_rooms.value())
    const minSize = parseInt(input_min_size.value())
    const maxSize = parseInt(input_max_size.value())
    // 校验参数合法性
    if(roomCount > 0 && minSize >0 && maxSize >0 && minSize <= maxSize) {
        // 用新参数生成实例后绘制
        const generator = new Room_map(roomCount, minSize, maxSize)
        generator.draw()
    }
}

内容的提问来源于stack exchange，提问作者imanoob