<body>
<div id="dice0" class="dice">0</div>
<div id="dice1" class="dice">0</div>
<button onclick ="rollDice()">Roll a Pair of Dice</button>
<br>
<button onclick ="rollDice1000()"> Roll 1000 Times</button>
<br>
<div id="result"class="current"></div>
<div id="list" class="list"></div>
<script src="code.js"></script>
</body>
</html>
let results = [null, null, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
function rollDice(){
let dice0 = document.getElementById("dice0");
let dice1 = document.getElementById("dice1");
let result = document.getElementById("result");
let list = document.getElementById("list");
let d0= Math.floor(Math.random()*6)+1;
let d1= Math.floor(Math.random()*6)+1;
let total = d0+d1;
dice0.innerHTML = d0;
dice1.innerHTML = d1;
result.innerHTML = "You rolled "+total+"."
results[total]+=1;
list.innerHTML = results.map((val, index)=> `You have rolled ${index}: ${val} times`).join('<br/>');
}
The code above is a simple javascript dice game that tracks the number of times a result is given.
the results should be between 2 and 12
What you will see is:
You have rolled 0: null times
You have rolled 1: null times
The final string spits out 2 null variables that should not be listed; because they can not be rolled (0 and 1)I do not want to changed the array. Where and how can I add a ".slice()" to remove them from the output? or is there a better way to do it with javascript?
Subsequently, is there a way to break up the list? That I may organize the output with CSS?
for example;
[You have rolled 2: 7 times.] [You have rolled 3: 2 times.] [You have rolled 4: 5 times.] [and so on]
assume the brackets are styled elements
You can use a ternary operator to only add ${val} times to the output if val is not null:
let results = [null, null, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
function rollDice() {
let dice0 = document.getElementById("dice0");
let dice1 = document.getElementById("dice1");
let result = document.getElementById("result");
let list = document.getElementById("list");
let d0 = Math.floor(Math.random() * 6) + 1;
let d1 = Math.floor(Math.random() * 6) + 1;
let total = d0 + d1;
dice0.innerHTML = d0;
dice1.innerHTML = d1;
result.innerHTML = "You rolled " + total + "."
results[total] += 1;
list.innerHTML = results.map((val, index) => val != null ? `You have rolled ${index} ${val} times` : null).join('<br/>');
}<body>
<div id="dice0" class="dice">0</div>
<div id="dice1" class="dice">0</div>
<button onclick="rollDice()">Roll a Pair of Dice</button>
<br>
<button onclick="rollDice1000()"> Roll 1000 Times</button>
<br>
<div id="result" class="current"></div>
<div id="list" class="list"></div>
<script src="code.js"></script>
</body>
</html>If you want to style each, you can wrap them in a div:
let results = [null, null, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
function rollDice() {
let dice0 = document.getElementById("dice0");
let dice1 = document.getElementById("dice1");
let result = document.getElementById("result");
let list = document.getElementById("list");
let d0 = Math.floor(Math.random() * 6) + 1;
let d1 = Math.floor(Math.random() * 6) + 1;
let total = d0 + d1;
dice0.innerHTML = d0;
dice1.innerHTML = d1;
result.innerHTML = "You rolled " + total + "."
results[total] += 1;
list.innerHTML = results.map((val, index) => val != null ? `<div class="item">You have rolled ${index} ${val} times</div>` : null).join('<br/>');
}.item {
padding: 10px;
background: lightgrey;
margin: 10px;
}
#list {
display: flex;
flex-wrap: wrap;
}<body>
<div id="dice0" class="dice">0</div>
<div id="dice1" class="dice">0</div>
<button onclick="rollDice()">Roll a Pair of Dice</button>
<br>
<button onclick="rollDice1000()"> Roll 1000 Times</button>
<br>
<div id="result" class="current"></div>
<div id="list" class="list"></div>
<script src="code.js"></script>
</body>
</html>You can skip adding an entry if there's no value:
list.innerHTML = results.map((val, index)=> {
if(val && val > 0){
return `You have rolled ${index}: ${val} times`;
}
return null;
});
Additionally, if you want more control with css, you could wrap each entry in a div and then style them all according to your desires.
list.innerHTML = results.map((val, index)=> {
if(val && val > 0){
return `<div class="myClass">You have rolled ${index}: ${val} times</div>`;
}
return '';
});