如何在p5.js脚本中修改<p>元素的innerText？

当然可以修改，你当前的代码存在几个问题，调整后就能实现需求：

问题分析 #

• 语法错误：setup 和 draw 是p5.js的核心生命周期函数，必须以 function setup() 和 function draw() 的形式定义，不能省略function关键字和括号。
• 变量作用域问题：你在setup内部声明的myP是局部变量，draw函数无法访问它，需要将其提升为全局变量。
• DOM操作方式错误：p5.js对创建的DOM元素封装了专属方法，无需直接使用原生JS的innerText，推荐用.text()或.html()方法修改内容。

正确实现代码 #

// 声明全局变量存储p元素对象
let myP;

function setup() {
  createCanvas(400, 400);
  // 创建p元素并赋值给全局变量
  myP = createP("change this");
}

function draw() {
  background(220);
  // 用p5.js的text方法修改纯文本
  myP.text("new text");
  
  // 若需支持HTML格式内容，可改用html方法：
  // myP.html("<span style='color:red'>colored new text</span>");
  
  // 仅修改一次的话，添加noLoop()停止draw循环，避免重复执行
  noLoop();
}

补充说明 #

• .text()方法专门用于修改纯文本内容，会自动转义HTML标签；.html()方法则允许插入带格式的HTML内容。
• 由于draw默认每秒执行60次，若无需持续修改文本，一定要加noLoop()来终止循环，减少性能消耗。

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