如何使用 node.js 修改我的 HTML 文件？

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 机器人。

但是当我尝试通过该 javascript 文件修改我的 HTML 时，我收到如下错误：

ReferenceError: the document is not defined

我已经搜索过它，发现 node.js 是服务器端的，所以我不能使用document.getElementById。

但我想使用该 node.js javascript 文件修改我的 HTML 文件。

有什么方法可以做到吗？

我在这里尝试做的是，当他们键入 joingame 命令时，用户名将写入我的 HTML 文件中的 p 标签中。

我对开发还很陌生，如果我把问题搞砸了，很抱歉。

Answer 1

正如您正确识别的那样，您无法从服务器端访问文档，因为它只存在于浏览器中。如果你想在服务器端的 Node JS 上使用它，你需要parse HTML。

你需要像这样安装它

npm install --save node-html-parser

然后你就可以做类似的事情

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

Answer 2

在这个例子中 -

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 sn-ps，我们可以进一步工作。

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