JavaScript：多个骰子滚轮，每个滚轮都有自己的骰子总和

Question

我有一个大学作业，我应该编写一个掷骰子的代码。

您可以从滚轮中添加和减去骰子。当您按下按钮添加骰子时，会创建一个带有随机点数（1 到 6）的 d6。您最多可以向滚筒添加 40 个骰子。

掷骰子显示掷出的骰子的总和。我的问题是，当我打开多个滚轮而不是计数器为零时，会复制第一个滚轮中骰子的总和。当我向新滚轮添加更多骰子时，它们将添加到第一个滚轮而不是新滚轮的总和中。换句话说：

骰子 1 显示骰子 1,2,3,4...的总和...

骰子 2 只显示骰子 1 的初始总和，然后不更新。

我怎样才能阻止这种情况发生？我希望每个滚子只显示自己骰子的总和。换句话说：

在掷骰子 1 中，我只想显示掷骰子 1 中的骰子总和。

在骰子滚轮 2 中，我只想显示滚轮 2 中骰子的总和。

这是带有一个点的骰子的代码。

// dice-side-one li
var diceSideOne = document.createElement("li");
diceSideOne.className = "dice dice-side-one";
diceSideOne.setAttribute('data-diceValue', '1');

这是计算骰子总和的代码。

function getSumDiceValue(){
    var dice = document.getElementsByClassName("dice");                 
    var diceTotal = 0;                                                  
    for(var i = 0; i < dice.length; i++){                               
        diceTotal += Number(dice[i].getAttribute("data-diceValue"));    
    };                            
    return diceTotal;
};

这是显示骰子总和的代码。

// Dice summ li
var totalDiceSumm = document.createElement("p");
totalDiceSumm.className = "dice-summ";
totalDiceSumm.innerHTML = getSumDiceValue();

diceToolbarCounterWrapper.appendChild(totalDiceSumm);

（我刚刚意识到 sum 只用一个 'm' 拼写）

Answer 1

看了你的小提琴之后。您需要找出正在单击哪个Add Dice 按钮。然后，您可以找出要更新的总和作为其下一个元素。你可以用这一行来做到这一点：

this.nextSibling.innerHTML = getSumDiceValue();

this 引用了被点击的元素，所以this.nextsibling 引用了要更新的正确项目。

function insertDice() {
    var diceSideTwo = document.createElement("div");
    diceSideTwo.className = "dice dice-side-two";
    diceSideTwo.innerHTML = "2";
    diceSideTwo.setAttribute('data-diceValue', '2');
    diceWindowWrapper.appendChild(diceSideTwo);
    this.nextSibling.innerHTML = getSumDiceValue(); //use this instead of line below
    //document.getElementsByClassName('dice-summ')[1].innerHTML = getSumDiceValue()
};

不过，在更新总和时，您仍然会遇到循环遍历所有骰子的问题。

updated fiddle