Einen numerischen Wert zu einem DOM-Element hinzufügen

Question

Ich habe eine Universitätsaufgabe, in der ich eine Würfelrolle programmieren soll. Die gesamte HTML-Struktur für den Würfelroller soll vom DOM erstellt werden, mit Ausnahme der Schaltfläche zum Starten des eigentlichen Rollers.

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 Code eine zufällige Form für das Hinzufügen sieht wie folgt aus: (Ist dies der falsche Methode ist mir bitte sagen :))

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. 

}; 

Der Code für eine Düse mit einem Punkt wie folgt aus:

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

Der Code für eine Düse mit 2 Punkten sieht wie folgt aus:

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

Und et cetera ...

Der Wert aller Würfel soll addiert und dem Benutzer angezeigt werden.

Meine Frage ist: Wie kann ich jedem Würfel einen numerischen Wert hinzufügen, der seine Anzahl von Punkten darstellt. Damit ich sie alle addieren kann, um dem Benutzer den Summ aller Würfel zu zeigen.

Mit anderen Worten. Wenn ich 5 Würfeln mit 5 Würfeln habe, mit den Gesichtern 2, 3, 5, 4, 5. Wie kann ich dem Benutzer die Summe der gewürfelten Würfel zeigen, was in diesem Fall 19 für den Benutzer wäre.

Answer 1

Sie können für jeden Würfel, der seinen Wert enthält, ein Attribut angeben. Wenn die Würfel Variablen zu schaffen versuchen, etwas wie folgt aus:

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

Dann, wenn Sie die Werte der Würfel summieren möchten Sie hinzugefügt Sie dieses Attribut in einer Schleife über alle Elemente mit einer Klasse von dice zugreifen können.

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

Eine weitere Erklärung:

Attribute können zu jedem Element hinzugefügt werden, und alles, was genannt werden kann, und eine beliebige Zeichenfolge-Wert. Übermäßige Verwendung kann unordentlich werden und es ist in der Regel besser, Informationen in Variablen in Ihrem Javascript zu speichern, aber dies war ein relativ einfaches Beispiel.

Das Attribut diceValue wird verwendet, um den numerischen Wert Ihres Würfels zu speichern. Nach den obigen drei Zeilen sieht das Markup für diceSideOne wie folgt aus: <li class="dice dice-side-one" dicevalue="1"></li>.

Der dicevalue="1" Teil dieses Elements ist, was wir später nachschlagen werden, wenn wir den Gesamtwert aller hinzugefügten Würfel finden.

Die getSumDiceValue Funktion greift zunächst alle Elemente mit der Klasse dice und speichert sie für eine spätere Verwendung in den Variablen dice (dies ist ein Array von Ihren .dice Elementen).

Um die Summe aller Würfelwerte von diesem Punkt aus zu finden, müssen wir uns jedes Element in dieser Würfelreihe ansehen und auf ihr dicevalue Attribut zugreifen.

A für Schleife verwendet wird, in dem dice Array an jedem Elemente zu betrachten, wird dice[i].getAttribute('diceValue') uns geben, die das Attribut dicevalue gebunden Wert („1“, „2“, usw.). Das ist in Number() verpackt, um es von einer Zeichenfolge zu einer Nummer zu konvertieren, die wir verwenden können.

Die diceTotal Variable beginnt bei 0 und jedes Mal durch die Schleife fügen wir die dicevalue Nummer hinzu. Sobald die Schleife beendet ist, gibt die letzte Zeile return diceTotal; unsere Funktion die Summe aller Würfelwerte zurück.

Answer 2

1) Auswahl aller Elemente mit Klasse Würfeln

2) Schleife über die Elemente und für jede Kontrolle die andere Klasse

3) die Klassennamen hinzufügen, diese Nummer Basierend aus (wenn Würfelseiten zwei dann 2)