编辑输入框，其中在p5.js中已经有文本

Question

我正在尝试为我使用p5网络编辑器创建的应用做一个介绍，该应用向用户询问有关其姓名，年龄，睡眠时间和心情的基本问题。有一个屏幕允许用户更正他们已经输入的数据。我试图将这些数据显示为一系列输入，用户单击它们时就可以对其进行编辑。问题是，正确的数据出现在框中，但无法编辑。这是我的代码的副本：

var screen1;
var screen2;

function setup() 
{
  createCanvas(650, 500);
  background(165, 223, 209);
  enterName = createInput();
  nameButton = createButton('Enter');
  const name = enterName.value();
  correctName = createInput();
  declareBooleans();
}

function draw() 
{
  if (screen1 == true)
  {
    drawScreen1();
  }
  else if (screen2 == true)
  {
    drawScreen2();
  }
}

function drawScreen1()
{
  textSize(80);
  fill(255);
  text("What's Your \n    Name?", 120, 200);
  enterName.position(213, 350);
  enterName.size(170, 30);
  enterName.style('font-size', '21px');
  nameButton.position(enterName.x + enterName.width, 350);
  nameButton.size(70, 36);
  nameButton.style('font-size', '21px');
  nameButton.mousePressed(screen1MousePressed);
}

function drawScreen2()
{
  enterName.remove();
  nameButton.remove();
  background(165, 223, 209);
  const name = enterName.value();
  correctName.value(name);
  textSize(70);
  text("Is this correct?", 100, 80);
  textSize(30);
  text("(Type in the boxes to change your answers)", 35, 120);
  textSize(30);
  text("Name:", 20, 190);
  correctName.position(120, 150);
  correctName.size(150, 50);
  correctName.style('font-size', '26px');
}

function declareBooleans()
{
  screen1 = true;
  screen2 = false;
}

function screen1MousePressed()
{
    screen1 = false;
    screen2 = true;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>

Answer 1

问题是，一旦布尔值screen2更改为true，则每次执行draw()函数时都会绘制第二个屏幕，通常每秒执行几次，因此输入将重新显示为默认值，然后才能看到任何更改。

一种解决方法可能是使用noLoop()来停止重新绘制，如下所示：

function screen1MousePressed()
{
    screen1 = false;
    screen2 = true;
    noLoop();
}