Javascript 使用EJS和Node动态呈现具有函数的HTML div

我试图在一个网站上用EJS动态地呈现一个相对简单的记分板。我有一个单一的球员，我想为X数量的球员渲染工作设置。无论您选择多少玩家，我都可以使用启动设置，但该功能仅适用于第一个玩家。摘要：

• 您有一个分数“字段”，它是一个输入+一个显示“添加”的按钮
• 我特别选择了文本输入，后来我将其转换为数字，因为数字输入旁边有这些箭头，它们很难看
• 该函数的工作原理是在第一次输入后删除“添加”按钮，并将其添加到当前输入
• 这些输入代表游戏中的“回合”，你可以在其中获得分数。基本上，你填写了这一轮的分数，然后进入下一轮

所有这些工作都很顺利，但当我试图渲染每个玩家的完整设计+功能时，它会变得一团糟。第二名/第三名/第四名球员完美地呈现了他们的起始位置，但当我按下他们得分场上的“添加”按钮时，第一名球员的得分场发生了变化。这显然是因为我没有正确命名新元素。他们都指向玩家1。我似乎不知道该把forEach放在哪里（以及在哪里关闭它），以及如何命名这些元素以使其工作！如何为每个播放器获得相同的功能？我是否应该创建一个包含getter和setter的类“类记分板”（如果是这样的话：有什么提示吗？），或者我是否可以通过更多的DOM操作来摆脱这个问题？

预加载选择页面

    <h3>How many players are playing?</h3>
    <form id="preloadForm" action="/preload" enctype="application/x-www-form-urlencoded" method="POST">
        <input type="number" name="numberOfPlayers">

        <br />
        <br />
        <button type="submit" name="playButton">PLAY!</button>
    </form>

有多少玩家在玩？




玩

实际索引页（删除了/br和结束标记）

{ %>
玩家
请在此处记录您的分数：
添加
计算你的结果
函数addInputButton（）{
//动态创建输入类型。
让newInput=document.createElement（“输入”）；
让newButton=document.createElement（“按钮”）
让lineBreak=document.createElement（“br”）；
让newDiv=document.createElement（“div”）；
让空格=document.createTextNode（“”）；
//为元素指定不同的属性。
setAttribute（“类型”、“文本”）；
setAttribute（“类”、“scoreContainer”）；
setAttribute（“onclick”，“addInputButton（）”）；
setAttribute（“id”、“child”）；
newButton.innerHTML=“添加”；
newDiv.setAttribute（“id”、“父项”）
var parent=document.getElementById（“父项”）；
var child=document.getElementById（“child”）；
var addElement=document.getElementById（“新元素”）；
父母。removeChild（子女）；
父项。删除属性（“id”、“父项”）；
//将元素追加到div中，然后将div添加到span中。
addElement.appendChild（newDiv）；
newDiv.appendChild（newInput）；
newDiv.appendChild（空格）；
newDiv.appendChild（newButton）；
newDiv.appendChild（换行符）；
};
函数calculateScore（）{
让分数=document.getElementsByClassName（“scoreContainer”）；
让答案为number=0；
for（设i=0；i

服务器端节点.js

app.get('/preload', (req, res) => {
    res.render('preload');
});

app.post('/preload', (req, res) => {

    let numberOfPlayers = req.body.numberOfPlayers;
    let playerObj = {};

    for(let i = 0; i < numberOfPlayers; i++){
        playerObj[i] = i;
    };

    let playerArr = Object.keys(playerObj);

    res.render('index', { players: playerArr });
});

app.get（'/preload'，（req，res）=>{
res.render（“预加载”）；
});
app.post（“/preload”，（请求、回复）=>{
让numberOfPlayers=req.body.numberOfPlayers；
让playerObj={}；
for（设i=0；i

问题：根据预加载选择，如何为每个玩家呈现此功能

app.get('/preload', (req, res) => {
    res.render('preload');
});

app.post('/preload', (req, res) => {

    let numberOfPlayers = req.body.numberOfPlayers;
    let playerObj = {};

    for(let i = 0; i < numberOfPlayers; i++){
        playerObj[i] = i;
    };

    let playerArr = Object.keys(playerObj);

    res.render('index', { players: playerArr });
});