title: How can I modify my HTML file with node.js?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>require('dotenv').config()
  var ComfyJS = require("comfy.js");
  
  var firstplayer = document.getElementById("firstcharactername");
  
  var maxPlayer = 0;
  var totalAmount = 0;
  var playerOne = "player1";
  var playerTwo = "player2";
  var playerOneScore = 0;
  var playerTwoScore = 0;
  
  var playerOneHealth = 50;
  var playerTwoHealth = 50;
  var playerOneTurnNumber = 1;
  var playerTwoTurnNumber = 0;
  
  function randomFunc(min, max)
  {
   return Math.floor(Math.random() * max) + min;
  }
  
  ComfyJS.onCommand = ( user, command, message, flags, extra ) =&gt; {
      function rpsPicker()
      {
          var randomnumberRPS = randomFunc(1,3);
          if(randomnumberRPS === 1)
          {
              ComfyJS.Say("@" + user + " Rock");
          }
          else if(randomnumberRPS === 2)
          {
              ComfyJS.Say("@" + user + " Paper");
          }
          else if(randomnumberRPS === 3)
          {
              ComfyJS.Say("@" + user + " Scissors");
          }
      }
      function headtailPicker()
      {
          var randomnumberHeadTail = randomFunc(1,2);
          if(randomnumberHeadTail === 1)
          {
              ComfyJS.Say("@" + user + " Heads");
          }
          else
          {
              ComfyJS.Say("@" + user + " Tail");
          }
      }    
  ///////////////////////////////////////////////COMMANDS/////////////////////////////////////////////////
      if( command === "roll1" &amp;&amp; user === playerOne) 
      {   
          var randomNumber1 = randomFunc(2,11);
          ComfyJS.Say("@"+user + " You've rolled two dices equals to " + randomNumber1+".");
          playerOneScore += randomNumber1;
          ComfyJS.Say("@"+user + "'s total amount is "+ playerOneScore);
      }
      else if(command === "roll2" &amp;&amp; user === playerTwo)
      {
          var randomNumber2 = randomFunc(2,11);
          ComfyJS.Say("@"+user + " You've rolled two dices equals to " + randomNumber2+".");
          playerTwoScore += randomNumber2;
          ComfyJS.Say("@"+user + "'s total amount is "+ playerTwoScore);
      }
      else if(command === "compare")
      {
          if(playerOneScore &gt; playerTwoScore)
          {
              ComfyJS.Say(playerOne+" won.")
          }
          else
          {
              ComfyJS.Say(playerTwo+" won.")
          }
      }
  
      else if (command === "joingame")
      {
          maxPlayer += 1;
          if(maxPlayer === 1)
          {
              playerOne = user;
              ComfyJS.Say("@"+user + " has joined the game " + ".");
              firstplayer.innerText = user;
          }
          else if(maxPlayer === 2)
          {
              playerTwo = user;
              ComfyJS.Say("@"+user + " has joined the game " + ".");
          }
          else if(maxPlayer &gt; 2)
          {
              ComfyJS.Say("Max player limit!")
          }
      }
  
      else if(command === "resetgame" &amp;&amp; flags.broadcaster == true)
      {
          totalAmount = 0;
          maxPlayer = 0;
          playerOne = "player1";
          playerTwo = "player2";
          playerOneScore = 0;
          playerTwoScore = 0;
      }
  
      else if (command === "rps")
      {
          rpsPicker();
      }
  
      else if (command === "flipcoin")
      {
          headtailPicker();
      }
  ///////////////////////////////////////////////COMBAT GAME//////////////////////////////////////////////////////
      else if( command === "attack1" &amp;&amp; user === playerOne) 
      {   
          if (playerOneTurnNumber &gt; 0)
          {
              var randomNumberAttack1 = randomFunc(5,12);
              ComfyJS.Say("/me " + "@"+user + " hits "+ randomNumberAttack1 + " damage to his opponent.");
              playerTwoHealth -= randomNumberAttack1;
              ComfyJS.Say("/me " + "@"+playerTwo + "'s remaining health is " + playerTwoHealth);
              playerOneTurnNumber -= 1;
          }  
          else
          {
              ComfyJS.Say("/me It's not your turn.");
          }
      }
  
      else if( command === "attack2" &amp;&amp; user === playerTwo) 
      {   
          if (playerTwoTurnNumber &gt; 0)
          {
              var randomNumberAttack2 = randomFunc(5,12);
              ComfyJS.Say("/me " + "@"+user + " hits "+ randomNumberAttack2 + " damage to his opponent.");
              playerOneHealth -= randomNumberAttack2;
              ComfyJS.Say("/me " + "@"+playerOne + "'s remaining health is " + playerOneHealth);
              playerTwoTurnNumber -= 1;
          }
          else
          {
              ComfyJS.Say("/me It's not your turn.");
          }       
      }
  
      else if( command === "endturn1" &amp;&amp; user === playerOne)
      {
          ComfyJS.Say("/me " + playerOne + " ends his turn.");
          playerTwoTurnNumber += 1;
      }
  
      else if( command === "endturn2" &amp;&amp; user === playerTwo)
      {
          ComfyJS.Say("/me " + playerTwo + " ends his turn.");
          playerOneTurnNumber += 1;
      }
  
    }
  
  
  
  
  ///////////////////////////////////////////WELCOMER/////////////////////////////////////////////////
  ComfyJS.onJoin = ( user, self, extra ) =&gt;
  {
      console.log(user);
      ComfyJS.Say("@"+user+" Welcome!");
  }
  /////////////////////////////////////////////////////////////////////////////////////////////////////
  
  ComfyJS.onChat = ( user, message, flags, self, extra ) =&gt;
      {
          console.log( user, message, extra.userColor, flags.broadcaster);
      }
  
  
  
  ComfyJS.Init( process.env.TWITCHUSER, process.env.OAUTH, "shiftyshifterr" );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/comfy.js@latest/dist/comfy.min.js"&gt;&lt;/script&gt;
  
      &lt;h1&gt;TEST GAME&lt;/h1&gt;
      &lt;div class="character-container"&gt;
          &lt;div class="first-character-container"&gt;
              &lt;p id="firstcharactername" class="first-character-name"&gt;&lt;/p&gt;
              &lt;img src="firstplayer.gif" alt="firstplayer"&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img src="secondplayer.gif" alt="secondplayer"&gt;
              &lt;p id="secondcharactername" class="second-character-name"&gt;&lt;/p&gt;
          &lt;/div&gt;    
      &lt;/div&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I'm using node.js to build a twitch bot.</p>
  <p>But when I try to modify my HTML via that javascript file I get an error like:</p>
  <p><code>ReferenceError: the document is not defined</code></p>
  <p>I've searched for it and found out that node.js is server sided so I can not use <code>document.getElementById</code> with it.</p>
  <p>But I want to modify my HTML file by using that node.js javascript file.</p>
  <p>Is there any way to do that and how?</p>
  <p><strong>What i'my trying to do here is that when they type joingame command user name will be written in p tag in my HTML file.</strong></p>
  <p>I'm pretty new to developing so sorry if I messed up with a question.</p>