Как я могу изменить свой HTML файл на node.js?

Question

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 ) => {
    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" && 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" && 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 > 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 > 2)
        {
            ComfyJS.Say("Max player limit!")
        }
    }

    else if(command === "resetgame" && 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" && user === playerOne) 
    {   
        if (playerOneTurnNumber > 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" && user === playerTwo) 
    {   
        if (playerTwoTurnNumber > 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" && user === playerOne)
    {
        ComfyJS.Say("/me " + playerOne + " ends his turn.");
        playerTwoTurnNumber += 1;
    }

    else if( command === "endturn2" && user === playerTwo)
    {
        ComfyJS.Say("/me " + playerTwo + " ends his turn.");
        playerOneTurnNumber += 1;
    }

  }




///////////////////////////////////////////WELCOMER/////////////////////////////////////////////////
ComfyJS.onJoin = ( user, self, extra ) =>
{
    console.log(user);
    ComfyJS.Say("@"+user+" Welcome!");
}
/////////////////////////////////////////////////////////////////////////////////////////////////////

ComfyJS.onChat = ( user, message, flags, self, extra ) =>
    {
        console.log( user, message, extra.userColor, flags.broadcaster);
    }



ComfyJS.Init( process.env.TWITCHUSER, process.env.OAUTH, "shiftyshifterr" );

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/comfy.js@latest/dist/comfy.min.js"></script>

    <h1>TEST GAME</h1>
    <div class="character-container">
        <div class="first-character-container">
            <p id="firstcharactername" class="first-character-name"></p>
            <img src="firstplayer.gif" alt="firstplayer">
        </div>
        <div>
            <img src="secondplayer.gif" alt="secondplayer">
            <p id="secondcharactername" class="second-character-name"></p>
        </div>    
    </div>
    <script src="app.js"></script>
</body>
</html>

Я использую node.js для создания Twitch-бота.

Но когда я пытаюсь изменить свой HTML с помощью этого javascript файл Я получаю сообщение об ошибке:

ReferenceError: the document is not defined

Я искал его и обнаружил, что node.js является серверным, поэтому я не могу использовать с ним document.getElementById .

Но я хочу изменить свой HTML файл, используя этот node.js javascript файл.

Есть ли способ сделать это и как?

Я пытаюсь сделать вот что: когда они набирают команду joingame, имя пользователя будет записано в теге p в моем HTML файле.

Я новичок в разработке, поэтому извините, если я ошибся с вопросом.

Answer 1

В этом примере -

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

https://expressjs.com/en/starter/hello-world.html

если вы заметили res.send - вы отправляете html туда

Если вы разместите свои фрагменты nodejs, мы сможем продолжить работу.

Answer 2

Как вы правильно определили, вы не можете получить доступ к документу со стороны сервера, потому что он существует только в браузере. Вам нужно будет проанализировать HTML, если вы хотите работать с ним на Node JS на стороне сервера.

Вам нужно будет установить его как

npm install --save node-html-parser

и тогда вы сможете сделать что-то вроде

import { parse } from 'node-html-parser';
//Some code
var document = parse(yourhtml);

Answer 3

document.getElementById взаимодействует с вашим «HTML документом» во время выполнения. Если вам нужно отредактировать содержимое «HTML файла», вам понадобится что-то вроде этого:

var fs = require('fs');
 
fs.readFile('index.txt', 'utf-8', function(err, data) {
    if (err) throw err;
 
    var newValue = 'new content';
 
    fs.writeFile('index.txt', newValue, 'utf-8', function(err, data) {
        if (err) throw err;
        console.log('Done!');
    })
})

Source