How to use the innerhtml in js and the issue with secens maneger

p5.js Libraries
1

Hi, I’m using scene manage.js to manage my different p5 sketches, so I have one HTML. I have a typewriter effect on the first page, when it goes to the next scene, I hope the text will disappear with the first scene. How can I do that? And I don’t want a separate CSS file, it will affect all of my sketches. Any thoughts?
HTML:

<!DOCTYPE html>
<html lang="">
<head>
  <link rel="stylesheet" href="styles.css">
</head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>closer</title>
  <style>
    body {
      padding: 0;
      margin: 0;
    }

    /* canvas */
  </style>
  <script src="lib/p5.js"></script>
  <script src="lib/p5.sound.js"></script>
  <script src="lib/p5.speech.js"></script>
  <script src="lib/scenemanager.js"></script>
  <script src="lib/ml5.min.js"></script>
  <script src="lib/tf.min.js"></script>
  <script src="lib/clmtrackr.js"></script>
  

</head>


<head>

<body>

  <script src=gamejs/main.js></script>
  <script src=gamejs/scene00_begin.js></script>
  <script src=gamejs/scene02_showterms.js></script>
  <script src=gamejs/scene03_scan.js></script>  
  <script src=gamejs/scene04_checking.js></script>
  <script src=gamejs/scene05_tocamera.js></script>
  <script src=gamejs/scene06_checking2.js></script>
  <script src=gamejs/scene07_louder.js></script> 
  <script src=gamejs/scene08_checking3.js></script> 
  <script src=gamejs/scene09_ending.js></script>  

</body>
</head>



<body>
  <h1 id="begintext"></h1>
</html>

fist scene


function begin() {
  const textDisplay = document.getElementById('begintext')
  const phrases = ['Hello.', 'I will guide throuhg the process.', 'Please read the terms.']
  let i = 0
  let j = 0
  let currentPhrase = []
  let isDeleting = false
  let isEnd = false

  this.enter = function () {
    mySound10.play();
    mySound11.loop();
    console.log('play');
    setTimeout(showTerms,30000);
  }

  function loop(){
    isEnd = false
    textDisplay.innerHTML = currentPhrase.join('')
    console.log('am i not here?')

    if (i < phrases.length) {

      if (!isDeleting && j <= phrases[i].length) {
        currentPhrase.push(phrases[i][j])
        
        j++
        textDisplay.innerHTML = currentPhrase.join('')
       
      }

      if (isDeleting && j <= phrases[i].length) {
        currentPhrase.pop(phrases[i][j])
        j--
        textDisplay.innerHTML = currentPhrase.join('')
      }

      if (j == phrases[i].length) {
        isEnd = true
        isDeleting = true
      }

      if (isDeleting && j === 0) {
        currentPhrase = []
        isDeleting = false
        i++
        if (i === phrases.length) {
          i = 0
        }
      }
    }
    const spedUp = Math.random() * (80 - 50) + 50
    const normalSpeed = Math.random() * (300 - 200) + 200
    const time = isEnd ? 2000 : isDeleting ? spedUp : normalSpeed
    setTimeout(loop, time)
  }
  loop()


  function showTerms() {
    mySound10.stop();
    mySound11.stop();
    mgr.showScene(showterms);
    console.log('scene01 ends');
  }
}

css

body {
  /* background-color: rgb(10, 10, 10); */
  text-align: center;
  color: rgb(22, 21, 21);
  /* display: ; */
  justify-content: center;
  margin-top: 300px;
  margin-left:200px;
}

#begintext {
  border-right: solid white 4px;
  height: 35px;
}