Javascript 单击P5DOM后如何删除submit按钮

我是javascript的新手，我正在尝试创建一个类型的冒险游戏。我正在p5.js上使用DOM。我希望在你输入“你的英雄名字”后，提交按钮消失。另外，我希望游戏的其余部分设置一个多选答案类型，因此如果你也能帮助找到一个起点，这将非常有帮助。多谢各位

var input, button, greeting;
var a;

function setup() {


  // create canvas
  createCanvas(710, 400);



  input = createInput();
  input.position(20, 100);

  button = createButton('submit');
  button.position(200, 150);
  button.mousePressed(greet);

  greeting = createElement('h2', 'what is the name of your hero?');
  greeting.position(20, 5);


  textAlign(CENTER)
  textSize(50);
}

function greet() {
  var name = input.value();
  greeting.html(name+' lives in a peaceful and beautiful village called Scranton.  The only village not yet completely ravaged by the chaos and war surrounding daily life everywhere else.');
  input.value('');

     text(name, 0, 0);


}

---

我知道你只是刚刚开始思考这个游戏的结构，但这里有一个直接的答案

在greet（）中，您只需

hide（）

input按钮，这是您遇到的最小问题。稍后，您需要清除画布上以前的消息（在本例中，为了清除画布，我使用了一个小的

clearCanvas

函数），编写新消息，以某种方式定义下一个问题/任务，为用户提供选项

如果你想问一个选择题，我现在最好的答案是——使用按钮（直到p5中对单选按钮或下拉列表有了适当的支持——我只是从p5开始，但我认为他们还没有提供这些元素）

正如你所看到的，我为画布改变了一些背景色，这样你可以更好地看到正在发生的事情。此外，还删除了

position（）

调用，因为它们为您创建的问题多于解决方案。当您不使用它们时，元素将以相对预期的方式一个接一个地添加

还有最后一件事——这是一个快速而丑陋的解决方案，您可以使用

prepareQuestion

功能处理问题和答案的准备和展示

此解决方案是def。这也不是什么令人向往的东西，但如果你仍然对p5感兴趣，它可以让你走

var input, button, promptText, infoText;
var canvas;
var bgcolor = 210;
var a;

function setup() {


  // create canvas
    canvas = createCanvas(710, 400);
    fill(0);
    background(bgcolor);

    infoText = createElement('blockquote');

    promptText = createElement('h2', 'what is the name of your hero?');
    //promptText.position(20, 5);

    input = createInput();
    //input.position(20, 100);

    button = createButton('submit');
    //button.position(200, 150);
    button.mousePressed(greet);

    //textAlign(LEFT)
    textSize(30);
}

function greet() {
    button.hide();

    var name = input.value();

    //  shows the greeting for a new hero, inside the canvas
    text(name+' lives in a peaceful and beautiful village called Scranton.  The only village not yet completely ravaged by the chaos and war surrounding daily life everywhere else.',  20, 0, 700, 400);

    // calls the set up of the next question
    prepareQuestion(1);

}

function prepareQuestion(questNum) {

    switch (questNum) {
        case 1:
            input.value('').hide();

            //  writes the new question for a user
            promptText.html('<p>Do you want to go left or right?</p>');

            btnLeft = createButton('Left');
            btnRight = createButton('Right');

            btnLeft.mousePressed(function() {
                clearCanvas();
                text('Going left!', 20, 30);
                // or do anything else
            });
            btnRight.mousePressed(function() {
                clearCanvas();
                text('Going right!', 20, 30);
            });
        break;

        case 2:
            //  add here the code for question 2
            break;
    }
}

function clearCanvas() {
    rect(0, 0, canvas.width, canvas.height);
    background(bgcolor);
}

var输入、按钮、PrompText、infoText；
var帆布；
bgcolor=210；
var a；
函数设置（）{
//创建画布
canvas=createCanvas（710400）；
填充（0）；
背景色；
infoText=createElement（'blockquote'）；
PrompText=createElement（'h2'，'你的英雄叫什么名字？'）；
//提示文字位置（20,5）；
输入=createInput（）；
//输入。位置（20，100）；
按钮=创建按钮（“提交”）；
//按钮位置（200150）；
按钮。鼠标按下（问候）；
//文本对齐（左）
文本大小（30）；
}
函数{
按钮隐藏（）；
var name=input.value（）；
//在画布内显示对新英雄的问候
text（name+“居住在一个名为斯克兰顿的和平而美丽的村庄里。这是唯一一个还没有被其他地方日常生活的混乱和战争彻底摧毁的村庄。”，20,070400）；
//调用下一个问题的设置
准备（1）；
}
函数prepareQuestion（questNum）{
开关（questNum）{
案例1：
input.value（“”）.hide（）；
//为用户编写新问题
html（“要向左走还是向右走？
”）；
btnLeft=createButton（'Left'）；
btnRight=createButton（“右”）；
btnLeft.mousePressed（函数（）{
clearCanvas（）；
文本（“向左走！”，20，30）；
//或者做其他事情
});
btnRight.mousePressed（函数（）{
clearCanvas（）；
文本（“向右转！”，20，30）；
});
打破
案例2：
//在此添加问题2的代码
打破
}
}
函数clearCanvas（）{
rect（0，0，canvas.width，canvas.height）；
背景色；
}