JavaScript: Mehrere Würfelrollen mit jeweils eigenen Würfelwürfeln gerollt

Question

Ich habe einen Hochschulauftrag, wo ich einen Würfelroller programmieren soll.

Sie können Würfel von der Walze hinzufügen und abziehen. Wenn Sie den Knopf drücken, um einen Würfel hinzuzufügen, wird ein d6 mit einer zufälligen Anzahl von Punkten (1 bis 6) erstellt. Sie können der Walze bis zu 40 Würfel hinzufügen.

Der Würfelroller zeigt die Summe der gewürfelten Würfel. Mein Problem ist, dass, wenn ich mehrere Rollen öffne, anstatt dass der Zähler auf Null steht, die Summe der Würfel in der ersten Rolle kopiert wird. Wenn ich der neuen Walze mehr Würfel hinzufüge, werden diese zur Summe der ersten Walze anstelle der neuen Walze addiert. Mit anderen Worten:

Dice Walze 1 zeigt die Summe der Würfelrolle 1,2,3,4 ...

Dice Walze 2 zeigt nur die erste Summe von Würfelrolle 1, und dann nicht aktualisiert .

Wie kann ich dies verhindern? Ich möchte, dass jede Rolle nur die Summe ihrer eigenen Würfel zeigt. Mit anderen Worten:

in Würfelrolle 1, mag ich nur die Summe der Würfel in Walze 1

in Würfel Walze 2, um zu zeigen, ich will nur die Summe des Würfels 2 in Rolle zeigen.

Hier ist der Code für einen Würfel mit einem Punkt.

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

Hier ist der Code, um die Summe der Würfel zu berechnen.

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

Hier ist der Code, um die Summe der Würfel zu zeigen.

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

diceToolbarCounterWrapper.appendChild(totalDiceSumm); 

(Ich habe gerade realisiert Summe nur mit einem ‚m‘ geschrieben wird)

Answer 1

Nach einem Blick auf Ihrer Geige. Sie müssen herausfinden, welche Taste Add Dice angeklickt wird. Dann können Sie herausfinden, welche Summierung als nächstes Element aktualisiert werden soll. Sie können mit dieser Linie tun:

this.nextSibling.innerHTML = getSumDiceValue(); 

this verweist auf das Element geklickt wird, so this.nextsibling verweist das richtige Element zu aktualisieren.

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

Sie haben noch das Problem mit Looping durch alle Würfel, wenn zwar die Gesamtsumme aktualisieren.

updated fiddle