Добавление числового значения в элемент, созданный DOM

Question

У меня есть университетское задание, где я должен писать код для игры в кости. Предполагается, что вся структура HTML для ролика для игры в кости создается DOM, за исключением кнопки для запуска реального ролика.

Вы можете добавлять и вычитать кости из ролика. Когда вы нажимаете кнопку, чтобы добавить кости, создается d6 со случайным количеством точек (от 1 до 6). Вы можете добавить до 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.

};  

Код для кубика с одной точкой:

// 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 d6 кубиков, с гранями 2, 3, 5, 4, 5. Как я могу показать пользователю сумму выпавших кубиков, которая в этом случае будет 19 для пользователя.

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 используется для хранения числового значения вашего кубика. После трех приведенных выше строк разметка для diceSideOne будет выглядеть следующим образом:<li class="dice dice-side-one" dicevalue="1"></li>,

dicevalue="1" часть этого элемента - это то, что мы рассмотрим позже, когда найдем общую стоимость всех добавленных костей.

getSumDiceValue Функция сначала захватывает все элементы с классом dice и сохраняет их для последующего использования в переменной dice (это массив ваших .dice элементы).

Чтобы найти сумму всех значений костей из этой точки, нам нужно посмотреть на каждый элемент в этом массиве костей и получить доступ к их dicevalue приписывать.

Цикл for используется для просмотра каждого элемента в dice массив, dice[i].getAttribute('diceValue') даст нам значение, привязанное к dicevalue атрибут ("1", "2" и т. д.). Это завернуто в Number() чтобы преобразовать его из строки в число, которое мы можем использовать.

diceTotal переменная начинается с 0 и каждый раз через цикл мы добавляем dicevalue номер к нему. Как только цикл закончен, последняя строка return diceTotal; заставляет нашу функцию возвращать сумму всех значений dice.

Answer 2

1) Выберите все элементы с классом кости

2) Зациклите элементы и для каждого проверьте другой класс

3) Основываясь на имени класса, добавьте это число (если dice-side-two, то 2)