Reputation: 37
Simplifing JavaScript Variables
The following code works perfectly for what I am doing but I was wondering if there is a way to truncate it using an array.
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;
}
I have tried putting all the variables into an array but can not for the life of me get the function to fire. Any assistance in being able to truncate this code would be greatly appreciated as there are going to be 7 different blocks all with 4 variables that will be fired at once. I can continue this function as is for the 7 different stats (i.e strengthTotal") however the block would be huge for something that should be very simple.
I dont know if i was really be clear enough with what I am trying to do. I am posting the full HTML, JavaScript, and CSS code so you all can see what I have so far. (when you see the full JScript you will probably either laugh, cry, cringe or all of the above) As i said I have a basic understanding from about 15 years ago and have not really worked with code like this for awhile. This way you can see what I am seeing. So here it goes.
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;
}
and finally - dice.css:
div.dice {
width: 32px;
background: #f5f5f5;
border: #999 1px solid;
padding: 10px;
font-size: 24px;
text-align: center;
margin: 5px;
}
Upvotes: 0
Views: 144
Answers (5)
Reputation: 65853
Anytime you've got the same code more than once, you have an opportunity to refactor.
This will achieve what your code is looking for in a much more concise manner.
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>Upvotes: 2
Reputation: 1415
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);
}
To run this on a button click you can do something like this:
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>
Upvotes: 0
Reputation: 3723
This is the correct code to sum and then discard the smallest dice value, according to the code posted.
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;
}
This code
document.getElementById("strengthTotal").innerHTML = diceTotal;
will only work provided you have something like
<div id="strengthTotal"></div>
or
<a id="strengthTotal"></a>
or yet
<span id="strengthTotal"></span>
i.e., provided you have a HTML container object to receive the value.
To execute the code you need something like:
<a href="javascript:void(0)" onclick="roolDice();">Roll dice</a>
Upvotes: 0
Reputation: 463
I am unable to leave comments due to my reputation.
You said: " Roll Dice is there anything else that needs to be done to call the second function? – amfilipiak 1 min ago "
<button></button> only works inside a form. I recommend giving the button an id, and then attaching an event listener.
document.getElementById('myButton').addEventListener('click', rollDice());
Upvotes: 1
Reputation: 126
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;
This should do the trick
Upvotes: -2
Related Questions
- How do I check if an array includes a value in JavaScript?
- Loop (for each) over an array in JavaScript
- How can I remove a specific item from an array in JavaScript?
- How do I remove a property from a JavaScript object?
- Checking if a key exists in a JavaScript object?
- What does "use strict" do in JavaScript, and what is the reasoning behind it?
- How do I include a JavaScript file in another JavaScript file?
- Loop through an array in JavaScript
- How do JavaScript closures work?
- How to check whether a string contains a substring in JavaScript?