<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/>'); } El código anterior es un simple juego de dados de javascript que rastrea la cantidad de veces que se da un resultado.
los resultados deben estar entre 2 y 12
Lo que verás es:
Has sacado 0: nulo veces
Has sacado 1: nula veces
La cadena final escupe 2 variables nulas que no deben enumerarse; porque no se pueden rodar (0 y 1) no quiero cambiar la matriz . ¿Dónde y cómo puedo agregar un ".slice ()" para eliminarlos de la salida? o hay una mejor manera de hacerlo con javascript?
Posteriormente, ¿hay alguna manera de dividir la lista? ¿Que puedo organizar la salida con CSS?
por ejemplo;
[Has tirado 2: 7 veces.] [Has tirado 3: 2 veces.] [Has tirado 4: 5 veces.] [y así sucesivamente]
suponga que los corchetes son elementos con estilo
Puede usar un operador ternario para agregar solo ${val} times a la salida si val no es 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> Si desea diseñar cada uno, puede envolverlos en un 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>Puede omitir agregar una entrada si no hay ningún valor:
list.innerHTML = results.map((val, index)=> { if(val && val > 0){ return `You have rolled ${index}: ${val} times`; } return null; }); Además, si desea tener más control con css, puede envolver cada entrada en un div y luego diseñarlas todas de acuerdo con sus deseos.
list.innerHTML = results.map((val, index)=> { if(val && val > 0){ return `<div class="myClass">You have rolled ${index}: ${val} times</div>`; } return ''; });