隐藏/显示div p5.js

Question

我正在使用p5.js库，正在从事语音识别-文本到语音项目。一种聊天机器人。输入是语音输入，它变成一个字符串。我正在使用markov链从txt文件输出结果。输出是包含在div中的字符串。

我的问题是：

是否有一种方法可以隐藏/显示间隔包含我的输入/输出（.myMessage和.robotMessage）的div？我希望整个屏幕在讲话时首先只显示输入，然后输入消失，仅显示输出，然后当计算机语音说完时，屏幕上会显示我的输入，依此类推...

这里是代码的某些部分，请让我知道是否足够清楚。

//bot
function setup() {
  noCanvas();

   //reads and checks into the text file
   for (var j = 0; j < names.length; j++) {
    var txt = names[j];
    for (var i = 0; i <= txt.length - order; i++) {
      var gram = txt.substring(i, i + order);
      if (i == 0) {
        beginnings.push(gram);
      }

      if (!ngrams[gram]) {
        ngrams[gram] = [];
      }
      ngrams[gram].push(txt.charAt(i + order));
    }

  }

  //voice recognition
  let lang = 'en-US';
  let speechRec = new p5.SpeechRec(lang, gotSpeech);

  let continuous = true;
  let interim = false;
  speechRec.start(continuous, interim);

  //text-to-speach
  speech = new p5.Speech(); 
  speech.onLoad = voiceReady;

  function voiceReady() {
    console.log('voice ready');
  }

  //input-ouput
  function gotSpeech() {
    if (speechRec.resultValue) {
      var p = createP(speechRec.resultString);
      p.class('myMessage');
    }
     markovIt();
     chooseVoice(); 
     speech.speak(answer);

  }
}

和

function markovIt() {
  var currentGram = random(beginnings);
  var result = currentGram;


  for (var i = 0; i < 100; i++) {
    var possibilities = ngrams[currentGram];
    if (!possibilities) {
      break;
    }
    var next = random(possibilities);
    result += next;
    var len = result.length;
    currentGram = result.substring(len - order, len);
  }

  var answer = result;
  window.answer = answer;
  var p2 = createP(answer);
  p2.class('robotMessage');
}

HTML的外观

<div class="container">
    <div class="myMessage"></div>
    <div class="robotMessage"></div>
</div>

Answer 1

使用select()通过其ID，类或标记名获取文档元素。例如：

select()

通过let my_div = select("myMessage"); 更改元素的样式。

例如隐藏：

style()

例如显示：

style()

另请参阅my_div.style("display", "none");