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);

（我刚刚意识到总和只是拼写了一个＆＃39; m＆＃39;）

Answer 1

看着你的小提琴后。您需要找出点击了哪个Add Dice按钮。然后你可以找出要更新的summ作为下一个元素。您可以使用以下行执行此操作：

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

JavaScript：多个掷骰子，每个掷骰子都有自己的掷骰子

1 个答案: