简化JavaScript变量

以下代码完美适用于我正在做的事情，但我想知道是否有方法使用数组截断它。简化JavaScript变量

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; 
}

来源

2016-03-14 amfilipiak

为什么不一个函数*返回*值。然后，您可以将其用于所有不同的属性。 – Pointy

感谢您的及时回复。有没有关于返回价值的更多细节？ – amfilipiak

@amfilipiak我已为您更新的问题提供了更新的答案。 –

任何时候你有相同的代码不止一次，你有机会重构。

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

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>

来源

2016-03-14 20:33:32

你只是忘了丢弃最小的骰子值，就像OP发布的代码一样。 –

非常感谢您的及时回复。我只是试图使用上面的代码，我没有得到任何结果。一旦我点击按钮来调用rollDice（），它不会返回页面中的值。按钮的HTML代码如下 – amfilipiak

<按钮的onclick =“rollDice（）”>掷骰子是有别的什么，需要做调用第二个函数？ – amfilipiak

-2

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;

这应该做的伎俩

来源

2016-03-14 20:41:04

是不是你的函数滚动“amountOfDices”次4？ – Pointy

Oh woops我有一个印象，有6轮4骰子滚。如果不是这种情况，您可以简单地将randomNumber（）添加到rollDice（）方法中的diceTotal –

您仍然有更多的变量超出需要。引入一个数组只是删除所有这些d1，d2 ...变量。 –

我无法离开，由于我的名誉的意见。

你说：“ 掷骰子是有别的什么，需要做调用第二个功能 - amfilipiak 1分钟前？”

<button></button>只能一个形式里面。我建议给按钮一个id，然后附上一个事件监听器。

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

来源

2016-03-14 20:46:49 Observer

'addEventListener（'click'，rollDice（））'将附加rollDice的返回值，所以除非它返回一个函数，工作。 – user3173842

谢谢user3173842。 addEventListener（'click'，function（）{rollDice（）;}）会工作，但？ – Observer

对，或者只是'addEventListener（'click'，rollDice）' – user3173842

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

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>

来源

2016-03-14 20:53:32

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>

来源

2016-03-14 21:25:18 user3173842

简化JavaScript变量

回答

相关问题