如何在P5JS计算器中点击按钮向输入框追加运算符？

要实现点击加号按钮向输入框追加运算符的功能，你可以按以下步骤修改代码：

1. 修复代码中的关键错误 #

首先删除setup函数里的这一行，它会覆盖P5.js内置的createInput函数，导致后续功能异常：

createInput = ('<input id="userInput1" value="0">') 

2. 实现PLUSX函数 #

修改PLUSX函数，获取输入框当前内容，追加带空格的加号（提升可读性），再将新内容设置回输入框：

function PLUSX() {
  // 获取输入框当前值
  let currentValue = INPUT.value();
  // 追加带空格的加号
  let newValue = currentValue + " + ";
  // 更新输入框内容
  INPUT.value(newValue);
}

3. 扩展到其他运算符（可选） #

如果要给减、乘、除按钮实现同样逻辑，可以参照PLUSX编写对应函数，并绑定到按钮上：

// 减号功能函数
function MINUSX() {
  let currentValue = INPUT.value();
  INPUT.value(currentValue + " - ");
}

// 乘号功能函数（注意：按钮显示×，但eval需要用*）
function MULTIPLYX() {
  let currentValue = INPUT.value();
  INPUT.value(currentValue + " * ");
}

// 除号功能函数（注意：按钮显示÷，但eval需要用/）
function DIVIDEX() {
  let currentValue = INPUT.value();
  INPUT.value(currentValue + " / ");
}

然后在setup函数中给对应按钮绑定函数：

MINUS.mousePressed(MINUSX);
DIVIDE.mousePressed(MULTIPLYX); // 你的DIVIDE按钮显示×，对应乘法逻辑
MULTIPLY.mousePressed(DIVIDEX); // 你的MULTIPLY按钮显示÷，对应除法逻辑

额外优化（可选） #

如果输入框初始值为0，点击加号时不想保留0，可以添加判断逻辑：

function PLUSX() {
  let currentValue = INPUT.value();
  if (currentValue === "0") {
    // 初始值为0时直接替换为加号
    INPUT.value(" + ");
  } else {
    INPUT.value(currentValue + " + ");
  }
}

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