将数值添加到 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

1) Select 所有具有 class 个骰子的元素

2) 遍历元素并检查每个元素 class

3) 根据 class 名称添加该数字（如果骰子面为 2，则为 2）

Answer 2

您可以在每个骰子上指定一个属性来保存它的值。在创建骰子变量时尝试这样的事情：

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

然后，当您想对添加的骰子的值求和时，您可以在所有元素的循环中访问该属性，其中 class 为 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 函数首先获取带有 class dice 的所有元素，并将它们保存在变量 dice 中供以后使用（这是您的 .dice个元素）。

要找到此时所有骰子值的总和，我们需要查看该骰子数组中的每个元素并访问它们的 dicevalue 属性。

for 循环用于查看 dice 数组中的每个元素，dice[i].getAttribute('diceValue') 将为我们提供与 dicevalue 属性相关的值（“1”、“2 “， ETC）。它被包裹在 Number() 中以将其从字符串转换为我们可以使用的数字。

diceTotal 变量从 0 开始，每次循环我们都会向其添加 dicevalue 数字。一旦循环完成，最后一行 return diceTotal; 使我们的函数 return 所有骰子值的总和。

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

Adding a numerical value to a DOM created element

javascript

dom

random

addition

dice