Hide/Show div p5.js

Question

我正在使用 p5.js 库，并且我正在进行语音识别 - 文本到语音项目。一种聊天机器人。输入是变成字符串的语音输入。我正在使用马尔可夫链从 txt 文件输出结果。输出是包含在 div.

中的字符串

我的问题是：

有没有办法 hide/show 包含我的 input/output（.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、class 或标签名称获取文档元素。例如：

let my_div = select("myMessage");

通过style()更改元素的样式。

例如隐藏：

my_div.style("display", "none");

例如显示：

my_div.style("display", "block");

另见 Toggle Hide and Show

Hide/Show div p5.js

Hide/Show div p5.js

javascript

dom

hide

show

p5.js