使用p5.js实现场景切换，点击Report按钮无响应问题排查

我想实现这样一个功能：初始页面仅显示Report按钮，点击该按钮后跳转到可输入文本的页面，此页面包含输入框、Submit按钮和Cancel按钮；若输入评论并点击Submit按钮，输入内容会显示出来；若点击Cancel按钮，则返回仅含Report按钮的初始页面。

我确定目前的代码存在错误，但核心疑问是：为什么点击Report按钮后没有任何反应？ 我的代码是基于一篇Stack Overflow帖子编写的。

我的代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>

JavaScript #

let reportButton;
let cancelButton;
let reporting;
let button;
//let input;

const scenes = {
  
  report: () => {
    cancelButton?.remove();
    // initialize idle state
    reporting = false;
    reportButton = createButton("Report");
    reportButton.position(5, 5);
    reportButton.mousePressed = () => {
      scenes.reportComment();
    };
    draw = () => {
        clear();
    };
  },

  reportComment: () => {
    reportButton?.remove();
    reporting = true;
    cancelButton = createButton("Cancel");
    cancelButton.position(5, 5);
    cancelButton.mousePressed = () => {
      scenes.report();
    };
    draw = () => {
      clear();
      input = createInput();
      input.position(20, 65);

      button = createButton('Submit');
      button.position(input.x + input.width, 65);
      button.mousePressed(sendReport);
      
      question = createElement('h2', 'Report');
      question.position(20, 5);

      textAlign(CENTER);
      textSize(50);
      
    };
  },

};

function sendReport() {
  const customQ = input.value();
  question.html(customQ);
  input.value('');
}

function setup() {
  createCanvas(500, 100);
  textSize(20);
  
}

function draw() {
  scenes.report();
}

问题原因与修复 #

核心问题 #

你的draw()函数每帧都会执行scenes.report()，这会持续重置场景为初始状态——哪怕你点击Report按钮调用了scenes.reportComment()，下一帧draw又会把场景切回report，所以按钮点击看起来没有任何反应。此外，原代码在场景绘制函数里重复创建UI元素，也会导致界面混乱和逻辑冲突。

修复后的代码 #

let currentScene;
let reportButton;
let cancelButton;
let input;
let button;
let question;

const scenes = {
  // 初始场景初始化（仅切换时执行一次）
  initReport: () => {
    // 清除上一场景的所有元素
    cancelButton?.remove();
    input?.remove();
    button?.remove();
    question?.remove();
    
    reportButton = createButton("Report");
    reportButton.position(5, 5);
    reportButton.mousePressed(() => {
      currentScene = scenes.reportComment;
      scenes.initReportComment();
    });
  },
  // 初始场景绘制逻辑
  report: () => {
    clear();
  },

  // 评论场景初始化（仅切换时执行一次）
  initReportComment: () => {
    reportButton?.remove();
    
    cancelButton = createButton("Cancel");
    cancelButton.position(5, 5);
    cancelButton.mousePressed(() => {
      currentScene = scenes.report;
      scenes.initReport();
    });
    
    input = createInput();
    input.position(20, 65);

    button = createButton('Submit');
    button.position(input.x + input.width, 65);
    button.mousePressed(sendReport);
    
    question = createElement('h2', 'Report');
    question.position(20, 5);
  },
  // 评论场景绘制逻辑
  reportComment: () => {
    clear();
    textAlign(CENTER);
    textSize(50);
  },
};

function sendReport() {
  const customQ = input.value();
  if (customQ) {
    question.html(customQ);
    input.value('');
  }
}

function setup() {
  createCanvas(500, 100);
  textSize(20);
  // 初始化默认场景
  currentScene = scenes.report;
  scenes.initReport();
}

function draw() {
  // 只绘制当前活跃的场景
  currentScene();
}

关键修改说明 #

• 新增currentScene变量跟踪当前显示的场景，draw()函数仅执行当前场景的绘制逻辑，不再强制重置为初始场景
• 将每个场景拆分为初始化函数和绘制函数：初始化只在场景切换时执行一次，避免重复创建UI元素；绘制函数负责每帧的界面刷新
• 切换场景时主动清除上一场景的所有元素，避免界面堆积混乱
• 优化Submit按钮逻辑，空输入时不执行内容替换

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