簡化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變量

回答

相關問題