• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

143
Views
¿Dónde agrego un segmento a la cadena final de javascript?
<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

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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>

almost 3 years ago · Juan Pablo Isaza Report

0

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 ''; });
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error