p5.js点击submit切换雨滴颜色报Cannot read property 'call'错误求助

DevOps 小满

2026-10-5

问题根因

事件绑定错误：mousePressed方法要求传入函数对象作为回调，你代码中new submitbtn(submit(color))会直接执行submit函数，将返回的undefined传给事件监听，p5执行事件回调时调用undefined.call就会触发该报错。
下拉值获取时机错误：初始化时就把下拉框的值存到了变量中，后续修改下拉选项后该变量不会同步更新，即使事件修复也无法实现切换效果。
隐含问题：blacknwhite是数字类型而非数组，后续传入random()时逻辑和其他颜色数组不统一，容易出现异常。

修复方案

1. 调整全局变量声明

将下拉选择器实例提升为全局变量，方便submit函数动态读取当前选中值：

// 在全局作用域新增声明
let colorSelector;

2. 修改setup初始化逻辑

不要执行submit函数，直接传递函数引用给submitbtn：

function setup() {
    createCanvas(800,500);
    for(var i = 0; i <= howmany-1; i++ ) {
      drops[i] = new raindrop("line",blues); 
    }
    // 赋值给全局的colorSelector
    colorSelector = new select();
    // 直接传submit函数引用，不要加括号执行
    let submitButton = new submitbtn(submit);
}

3. 重写submit函数逻辑

点击时动态读取下拉框当前选中值，再更新雨滴颜色：

function submit(){
  let selectedOpt = colorSelector.sel.value();
  let targetColor;
  switch(selectedOpt) {
    case "colorful":
      targetColor = colorful;
      break;
    case "blues":
      targetColor = blues;
      break;
    case "blacknwhite":
      // 统一转成数组格式，和其他颜色逻辑对齐
      targetColor = [blacknwhite];
      break;
  }
  for(var i = 0; i < howmany; i++ ) {
    drops[i] = new raindrop("line", targetColor); 
  }
}