简化 JavaScript 变量答案

【问题标题】：Simplifing JavaScript Variables简化 JavaScript 变量
【发布时间】：2016-06-30 01:50:18
【问题描述】：

以下代码非常适合我正在做的事情，但我想知道是否有办法使用数组截断它。

function rollDice() {
   var d1 = Math.floor(Math.random() * 6) + 1;
   var d2 = Math.floor(Math.random() * 6) + 1;
   var d3 = Math.floor(Math.random() * 6) + 1;
   var d4 = Math.floor(Math.random() * 6) + 1;
   var diceTotal = d1 + d2 + d3 + d4 - Math.min(d1, d2, d3, d4);
   var strengthTotal = diceTotal;
   document.getElementById("strengthTotal").innerHTML = diceTotal;
}

我尝试将所有变量放入一个数组中，但我终生无法触发该函数。能够截断此代码的任何帮助将不胜感激，因为将有 7 个不同的块，所有块都带有 4 个变量，它们将立即被触发。对于 7 个不同的统计数据（即strengthTotal），我可以继续这个功能，但是对于应该非常简单的东西来说，这个块将是巨大的。

我不知道我是否真的对我正在尝试做的事情足够清楚。我发布了完整的 HTML、JavaScript 和 CSS 代码，所以你们都可以看到我到目前为止的内容。（当您看到完整的 JScript 时，您可能会大笑、哭泣、畏缩或以上所有内容）正如我所说的，我从大约 15 年前开始有了基本的了解，并且有一段时间没有真正使用过这样的代码了。这样你就可以看到我所看到的。就这样吧。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="dice.css">
  <script src="Script2.js"></script>
</head>
<body>
  <h2>Testing Differnet Types of Rolls</h2>
  <p> 4D6 Totaling 3 best rolls</p>   
  <button onclick="rollDice()">Roll Dice</button><br>
  <div>
    <p>Strength</p>
    <div id="strengthTotal" class="dice">0</div>
  </div>
  <div>
    <p>Dexterity</p>
    <div id="dexterityTotal" class="dice">0</div>
  </div>
  <div>
    <p>Constitution</p>
    <div id="constitutionTotal" class="dice">0</div>
  </div>
  <div>
    <p>Intelligence</p>
    <div id="intelligenceTotal" class="dice">0</div>
  </div>
  <div>
    <p>Wisdom</p>
    <div id="wisdomTotal" class="dice">0</div>
  </div>
  <div>
    <p>Charisma</p>
    <div id="charismaTotal" class="dice">0</div>
  </div>
</body>
</html>

JavaScript：

function rollDice() {
  var d1 = Math.floor(Math.random() * 6) + 1;
  var d2 = Math.floor(Math.random() * 6) + 1;
  var  3 = Math.floor(Math.random() * 6) + 1;
  var d4 = Math.floor(Math.random() * 6) + 1;
  var diceTotal = d1 + d2 + d3 + d4 - Math.min(d1, d2, d3, d4);
  document.getElementById("strengthTotal").innerHTML = diceTotal;
  var  1 = Math.floor(Math.random() * 6) + 1;
  var d2 = Math.floor(Math.random() * 6) + 1;
  var d3 = Math.floor(Math.random() * 6) + 1;
  var d4 = Math.floor(Math.random() * 6) + 1;
  var diceTotal = d1 + d2 + d3 + d4 - Math.min(d1, d2, d3, d4);
  document.getElementById("dexterityTotal").innerHTML = diceTotal;
  var d1 = Math.floor(Math.random() * 6) + 1;
  var d2 = Math.floor(Math.random() * 6) + 1;
  var d3 = Math.floor(Math.random() * 6) + 1;
  var d4 = Math.floor(Math.random() * 6) + 1;
  var diceTotal = d1 + d2 + d3 + d4 - Math.min(d1, d2, d3, d4);
  document.getElementById("constitutionTotal").innerHTML = diceTotal;
  var d1 = Math.floor(Math.random() * 6) + 1;
  var d2 = Math.floor(Math.random() * 6) + 1;
  var d3 = Math.floor(Math.random() * 6) + 1;
  var d4 = Math.floor(Math.random() * 6) + 1;
  var diceTotal = d1 + d2 + d3 + d4 - Math.min(d1, d2, d3, d4);
  document.getElementById("intelligenceTotal").innerHTML = diceTotal;
  var d1 = Math.floor(Math.random() * 6) + 1;
  var d2 = Math.floor(Math.random() * 6) + 1;
  var d3 = Math.floor(Math.random() * 6) + 1;
  var d4 = Math.floor(Math.random() * 6) + 1;
  var diceTotal = d1 + d2 + d3 + d4 - Math.min(d1, d2, d3, d4);
  document.getElementById("wisdomTotal").innerHTML = diceTotal;
  var d1 = Math.floor(Math.random() * 6) + 1;
  var d2 = Math.floor(Math.random() * 6) + 1;
  var d3 = Math.floor(Math.random() * 6) + 1;
  var d4 = Math.floor(Math.random() * 6) + 1;
  var diceTotal = d1 + d2 + d3 + d4 - Math.min(d1, d2, d3, d4);
document.getElementById("charismaTotal").innerHTML = diceTotal;
  }

最后 - dice.css：

div.dice {
  width: 32px;
  background: #f5f5f5;
  border: #999 1px solid; 
  padding: 10px;
  font-size: 24px; 
  text-align: center; 
  margin: 5px; 
}

【问题讨论】：

为什么不创建一个返回值的函数。然后，您可以将其用于所有不同的属性。
感谢您的及时回复。您是否可以分享有关返回值的更多详细信息？
@amfilipiak 对于您更新的问题，我有一个更新的答案。
为什么骰子总数不是骰子总数？

标签： javascript arrays var

【解决方案1】：

只要您多次获得相同的代码，您就有机会进行重构。

这将以更简洁的方式实现您的代码所要查找的内容。

var attributes = null;

window.addEventListener("DOMContentLoaded", function(){
    document.getElementById("btnGo").addEventListener("click", rollDice);
    attributes = document.querySelectorAll(".dice");
});  

function rollDice() {
  
  // Loop over each characteristic DOM element to get a dice value for it
  for(var e = 0; e < attributes.length; ++e){
     
   var diceTotal = 0, d = [], roll = null;
    
   // roll the dice 4 times
   for(var i = 0; i < 4; ++i){
         roll = getRandom();  // Get the random die value
         diceTotal += roll;   // Add to previous total
         d.push(roll);        // Put current roll into array of roles
   }

   // After all rolls, subtract the lowest roll from the total
   // Math.min is great, but it expects individual values passed as 
   // arguments, not a single array. So, by calling the Math.min function
   // via the .apply() method, we supply the object to use for "this"
   // (Math) and then we supply an array to use for argument values.
   diceTotal -= Math.min.apply(Math, d);

   // These are only here to verify values: ************
   /*
   alert("Array contains: " + d);
   alert("Min value is: " + Math.min.apply(Math, d));
   alert("Dice total (minus min) is: " + diceTotal);
   */
   // ***************************************************

   // Place result in the current DOM element 
   attributes[e].innerHTML = diceTotal;
    
  }
}

function getRandom(){
   return Math.floor(Math.random() * 6) + 1;
}

div.dice {
  width: 32px;
  background: #f5f5f5;
  border: #999 1px solid; 
  padding: 10px;
  font-size: 24px; 
  text-align: center; 
  margin: 5px; 
}

<h2>Testing Differnet Types of Rolls</h2>
  <p> 4D6 Totaling 3 best rolls</p>   
  <button id="btnGo">Roll Dice</button><br>
  <div>
    <p>Strength</p>
    <div id="strengthTotal" class="dice">0</div>
  </div>
  <div>
    <p>Dexterity</p>
    <div id="dexterityTotal" class="dice">0</div>
  </div>
  <div>
    <p>Constitution</p>
    <div id="constitutionTotal" class="dice">0</div>
  </div>
  <div>
    <p>Intelligence</p>
    <div id="intelligenceTotal" class="dice">0</div>
  </div>
  <div>
    <p>Wisdom</p>
    <div id="wisdomTotal" class="dice">0</div>
  </div>
  <div>
    <p>Charisma</p>
    <div id="charismaTotal" class="dice">0</div>
  </div>

【讨论】：

您只是忘记丢弃最小的骰子值，如 OP 发布的代码中所示。
非常感谢您的及时回复。我只是尝试使用上面的代码，但没有得到任何结果。一旦我单击按钮调用 rollDice()，它就不会在页面中返回值。按钮的html代码如下
调用第二个函数还有什么需要做的吗？
也许骰子的数量也是一个参数。
这不会很好地粘贴，但您没有正确丢弃低模——我们可以将卷存储在一个数组中并排序，然后删除第一个元素，然后将剩余的卷相加。 var rolls = []; for(var i = 0; i < 4; ++i){ rolls.push(getRandom()); }var diceTotal = rolls.sort().splice(1).reduce(function(a,b){ return a + b });

【解决方案2】：

由于我的声誉，我无法离开 cmets。

你说：“ Roll Dice 调用第二个函数还有什么需要做的吗？ – amfilipiak 1 分钟前“

<button></button> 只能在表单中使用。我建议给按钮一个 id，然后附加一个事件监听器。

document.getElementById('myButton').addEventListener('click', rollDice());

【讨论】：

addEventListener('click', rollDice()) 会附加 rollDice 的返回值，所以除非它返回一个函数，否则这是行不通的。
谢谢 user3173842。 addEventListener('click', function(){rollDice();}) 会工作，对吧？
对，或者只是addEventListener('click', rollDice)

【解决方案3】：

根据发布的代码，这是求和然后丢弃最小骰子值的正确代码。

function rollDice() {
  var rnd = 0;
  var minDice = 7;
  var diceTotal = 0;
  for(var i = 0; i < 4; ++i){
    rnd = getRandom(); 
    diceTotal += rnd;
    minDice = (rnd < minDice) ? rnd : minDice;
  }
  diceTotal -= minDice;

  // Not sure what your var strengthTotal = diceTotal was for
  document.getElementById("strengthTotal").innerHTML = diceTotal;
}

function getRandom(){
  return Math.floor(Math.random() * 6) + 1;
}

这段代码

document.getElementById("strengthTotal").innerHTML = diceTotal;

只有在你有类似的东西时才能工作

<div id="strengthTotal"></div>

或

<a id="strengthTotal"></a>

还是

<span id="strengthTotal"></span>

即，如果您有一个 HTML 容器对象来接收该值。

要执行代码，您需要以下内容：

<a href="javascript:void(0)" onclick="roolDice();">Roll dice</a>

【讨论】：

【解决方案4】：

function rollDice(sides) {
  sides = sides || 6;
  return Math.floor(Math.random() * sides) + 1;
}

function rollDices(dices, sides) {
  var rolls=[], i;
  for (i = 0; i < dices; i++) {
    rolls.push(rollDice(sides));
  }
  rolls.sort().shift();
  return rolls.reduce(function(a, b) {
    return a + b;
  }, 0);
}

要在单击按钮时运行它，您可以执行以下操作：

window.addEventListener('DOMContentLoaded', function() {
  document.getElementById('roll').addEventListener('click', function() {
    var strengthTotal = rollDices(4);
    document.getElementById('strengthTotal').innerHTML = strengthTotal;
    // or
    var roll3d4 = rollDices(3, 4);
  });
});

<button id="roll">Roll</button>
<span id="strengthTotal"></span>

【讨论】：

【解决方案5】：

function rollDice(aAmountOfDices) {
  var diceTotal = 0;
  for (i=0; i< aAmountOfDices; i++) {
      var d1 = getRandomNumber();
      var d2 = getRandomNumber();
      var d3 = getRandomNumber();
      var d4 = getRandomNumber();
      var thisDiceTotal = d1 + d2 + d3 + d4 - Math.min(d1, d2, d3, d4);
      diceTotal = diceTotal + thisDiceTotal;
  }
  return diceTotal;
}

function getRandomNumber() {
  return Math.floor(Math.random() * 6) + 1;
}

diceTotal = rollDice(6);
document.getElementById("strengthTotal").innerHTML = diceTotal;

这应该可以解决问题

【讨论】：

你的函数不是滚动“amountOfDices”次 4 吗？
哦，糟糕，我的印象是有 6 轮 4 个骰子正在滚动。如果不是这种情况，您可以简单地将 randomNumber() 添加到 rollDice() 方法中的 diceTotal
您仍然有比需要更多的变量。引入数组只是为了移除所有这些 d1, d2... 变量。
是的，你是对的，我刚刚看了 Scott Marucs 的回答，这是一个更好的解决方案