DOM作成された要素に数値を追加する

Question

私はダイスローラーをコードするはずの大学所属を持っています。ダイスローラーのHTML構造はすべて、実際のローラーを始めるボタンを除いて、DOMによって作成されているものとします。

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

ランダムダイスを追加するためのコードは次のようになります（これは間違った方法であれば教えてください:)）

var addLi = document.createElement("li"); // this creates the button to add a die. 
addLi.className = "add"; 
addLi.addEventListener("click", addRandomDice) // this fires of the function to create a random die. 

toolbarUl.appendChild(addLi); 

function get_random() 
{ 
    var ranNum= Math.floor(Math.random()*6); 
    return ranNum; 
} 

function addRandomDice(){ 
var whichDice=get_random(); 

    var dice=new Array(5) 
    dice[0]=diceSideOne; 
    dice[1]=diceSideTwo; 
    dice[2]=diceSideThree; 
    dice[3]=diceSideFour; 
    dice[4]=diceSideFive; 
    dice[5]=diceSideSix; 

    contentUl.appendChild(dice[whichDice].cloneNode(true)); // creates a random d6 dice. 

}; 

このような1個のドットを有するダイのためのコード：

// dice-side-one li 
var diceSideOne = document.createElement("li"); 
diceSideOne.className = "dice dice-side-one"; 

2個のドットを有するダイのコードは次のようになります。

// dice-side-two li 
var diceSideTwo = document.createElement("li"); 
diceSideTwo.className = "dice dice-side-two"; 

とエトセトラ...

すべてのサイコロの値が加算されてユーザーに表示されるはずです。

私の質問は：どのようにドットの量を表す数値を各ダイスに追加できますか？だから私はそれらをすべて一緒に追加して、ユーザーにすべてのダイスの合計を示すことができます。

つまり、もし私が5、6、5、4、5の面を持つd6のダイスを持っているなら、どうすればダイスの面の合計がユーザーに表示されますか？

Answer 1

値を保持する各ダイに属性を指定できます。サイコロを作成する際の変数は、このような何かを試してください：あなたがサイコロの値を合計したいとき

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

は、その後、あなたがdiceのクラスを持つすべての要素をループして、その属性にアクセスすることができました。

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

さらなる説明：

属性は任意の要素に追加することができ、自由に名前を付けると、任意の文字列値を指定することができます。過度の使用は乱雑になる可能性があり、JavaScript内の変数に情報を格納する方が一般的には良い方法ですが、これは比較的簡単な例でした。

属性diceValueは、ダイの数値を保持するために使用されます。上記の3行の後、diceSideOneのマークアップは <li class="dice dice-side-one" dicevalue="1"></li>のようになります。

dicevalue="1"この要素の一部は、追加されたすべてのサイコロの合計値を見つけるときに後で検索します。

getSumDiceValue関数がファーストクラスdiceですべての要素をつかみ、（これはあなたの.dice要素の配列である）変数diceで後で使用するために保存します。

この時点からのすべてのダイス値の合計を見つけるには、そのダイス配列内のすべての要素を調べて、dicevalue属性にアクセスする必要があります。 forループAがdice配列内のすべての要素を見て使用されている

、dice[i].getAttribute('diceValue')は私たちにdicevalue属性（「1」、「2」、など）に関連付けられた値が得られます。それは​​にラップされ、文字列から使用できる数字に変換されます。

変数diceTotalは0から始まり、ループを通過するたびにdicevalueという数値が追加されます。ループが終了すると、最終行return diceTotal;はすべてのdicevaluesの合計を返します。

Answer 2

1）の要素にわたってクラスダイスを持つすべての要素

2）ループを選択し、それぞれについて（その数を追加するクラス名をオフに基づいて、他のクラス

3）チェックダイス側個の場合then 2）