我在哪里将切片添加到最终的 javascript 字符串？答案

【问题标题】：Where in i add slice to the final javascript string?我在哪里将切片添加到最终的 javascript 字符串？
【发布时间】：2021-10-24 05:36:05
【问题描述】：

<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/>');

}

上面的代码是一个简单的 javascript 骰子游戏，它跟踪给出结果的次数。
结果应该在 2 到 12 之间
您将看到的是：

你已经投了 0: null 次
你已经滚动了 1: null 次

最后的字符串吐出 2 个不应列出的 null 变量；因为它们不能滚动（0 和 1）我不想更改数组。 在哪里以及如何添加“.slice()”以从输出中删除它们？ 或者有没有更好的方法来使用 javascript？
随后，有没有办法打破名单？我可以用 CSS 组织输出吗？
例如;

[你已经投了 2：7 次。] [你已经投了 3：2 次。] [你已经投了 4：5 次。] [等等]
假设括号是样式元素

【问题讨论】：

标签： javascript arrays dom

【解决方案1】：

如果val 不是null，您可以使用三元运算符仅将${val} times 添加到输出中：

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>

如果您想为每个设置样式，可以将它们包装在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 have rolling 0 You have rolling 1 Pop up as results still, 2 answers之间是解决方案！
@HelpWantedSign 我已经更新了我的答案。它现在应该可以工作了。

【解决方案2】：

如果没有值，您可以跳过添加条目：

list.innerHTML = results.map((val, index)=> {
 if(val && val > 0){
  return `You have rolled ${index}: ${val} times`;
 }
 return null;
});

此外，如果您想使用 css 进行更多控制，可以将每个条目包装在 div 中，然后根据您的需要设置它们的样式。

 list.innerHTML = results.map((val, index)=> {
  if(val && val > 0){
   return `<div class="myClass">You have rolled ${index}: ${val} times</div>`;
  }
  return '';
 });

【讨论】：

出于某种原因{当我添加此代码时} 我现在在页面上有几个逗号，它们显示在实时服务器上的每个骰子滚动 div 之间！狡猾的小家伙，我不知道他们是怎么到那里的！