在p5-dom上单击提交按钮后，我如何删除该按钮

Question

我是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);

}

Answer 1

我知道你才刚刚开始思考这个游戏的结构，但这里是你问题的直接答案。

在greet（）中，您只需hide()输入按钮，这是您遇到的最小问题。稍后，您需要从画布中清除以前的消息（在本例中，为了清除画布，我使用了一个小型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);
}