I have a university assignment where I am supposed to code a dice roller. All of the HTML structure for the dice roller is supposed to be created by the DOM, except for the button to start the actual roller.
You can add and subtract dice from the roller. When you press the button to add a dice a d6 is created with a random number of dots ( 1 through 6). You can add up to 40 dice to the roller.
The code for adding a random die looks like this: (If this is the wrong method please tell me :) )
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.
};
The code for a die with one dot like this:
// dice-side-one li
var diceSideOne = document.createElement("li");
diceSideOne.className = "dice dice-side-one";
The code for a die with 2 dots looks like this:
// dice-side-two li
var diceSideTwo = document.createElement("li");
diceSideTwo.className = "dice dice-side-two";
And et cetera...
The value of all the dice is supposed to be added together and shown to the user.
My question is: How can I add a numerical value to each dice which represents it's amount of dots. So that I can add them all together to show the user the summ of all the dice.
In other words. If I have 5 d6 dice, with the faces 2, 3, 5, 4, 5. How can I show the user the sum of the dice faces rolled, which in this case would be 19 to the user.
You can specify an attribute on each die that holds its value. When creating the dice variables try something like this:
// dice-side-one li
var diceSideOne = document.createElement("li");
diceSideOne.className = "dice dice-side-one";
diceSideOne.setAttribute('data-diceValue', '1');
Then when you want to sum up the values of the dice you added you can access that attribute in a loop over all elements with a class of 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;
}
Further explanation:
Attributes can be added to any element and can be named anything and given any string value. Excessive use can get messy and it is generally better practice to store information in variables within your javascript but this was a relatively simple example.
The attribute diceValue is used to hold the numerical value of your die. After the above three lines the markup for diceSideOne will look like this:
<li class="dice dice-side-one" dicevalue="1"></li>.
The dicevalue="1" part of that element is what we will be looking up later when finding the total value of all dice added.
The getSumDiceValue function first grabs all elements with the class dice and saves them for later use in the variable dice (this is an array of your .dice elements).
To find the sum of all dice values from this point we need to look at every element in that array of dice and access their dicevalue attribute.
A for loop is used to look at every element in the dice array, dice[i].getAttribute('diceValue') will give us the value tied to the dicevalue attribute ("1", "2", etc). That is wrapped in Number() to convert it from a string to a number we can use.
The diceTotal variable starts at 0 and each time through the loop we add the dicevalue number to it. Once the loop is finished the final line return diceTotal; makes our function return the sum of all dicevalues.