JavaScript：複数のダイスローラーでそれぞれサイコロのサイコロを振った

Question

私はダイスローラーをコードすることになっている大学の割り当てを持っています。

ローラーにダイスを追加したり引いたりすることができます。ボタンを押してサイコロを追加すると、ランダムなドット数（1〜6）でd6が作成されます。ローラーには最大40個のサイコロを加えることができます。

ダイスローラーは、ダイスの圧延の合計を示します。私の問題は、カウンターの代わりに複数のローラーを開いたときに、最初のローラーのサイコロの合計がコピーされることです。新しいローラーにさらにサイコロを加えると、新しいローラーの代わりに最初のローラーの合計に加算されます。言い換えれば：

ダイスローラ1ダイスローラ1,2,3,4の和を示し...

ダイスローラ2は、ダイスローラ1の最初の和を示し、その後更新しません。

どうしたらいいですか？私は各ローラーが自分のサイコロの合計だけを表示するようにしたい。言い換えれば：

サイコロローラー1では、私は、私だけが唯一のローラ2にサイコロの合計を表示したい、サイコロローラー2ではローラ1

にサイコロの合計を示したいと思います。

ここに1ドットのダイのコードを示します。

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

（私はちょうど合計が唯一の「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