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.

};

带有一个点的模具的代码如下：

// 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

1）选择所有带有骰子的元素

2）循环遍历元素，并为每个元素检查另一个类

3）根据班级名称添加该号码（如果骰子侧为2，则为2）

Answer 2

您可以在每个模具上指定一个包含其值的属性。在创建骰子变量时，请尝试以下方法：

// 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;使我们的函数返回所有骰子值的总和。

将数值添加到DOM创建的元素

2 个答案: