Resolved: How to keep pushing new values from a dataset on click event to an array

Question:

Trying to add the dice roll value from a data set every time the roll dice click is triggered and a new number is produced from a random math function.
Currently, the value is added to the array but only one value is added and the array is not incremented with each new roll value.
What is the best approach to push each new value to the array? Including a maximum of 25 additions.
The goal is to first console log each dice roll value and then eventually display them in the html as a list of 25 roll results.
Code Below:

function rollDice() {<br />
    const dice = [...document.querySelectorAll(".die-list")];<br />
    dice.forEach(die => {<br />
      toggleClasses(die);<br />
      die.dataset.roll = getRandomNumber(1, 6);<br />
      let res1 = document.getElementById("die-1").dataset.roll;<br />
      let res2 = document.getElementById("die-2").dataset.roll;<br />
      let res1Num = parseInt(res1);</p>
<p>      let resConten1 = document.getElementById("result1");<br />
      let resConten2 = document.getElementById("result2");<br />
      resConten1.innerHTML = res1;<br />
      resConten2.innerHTML = res2;</p>
<p>      // Results Array<br />
      let res1Arr = [];<br />
      console.log(res1Arr);</p>
<p>       if (res1Num < 25 ) {      
        res1Arr.push(res1Num);
        console.log(res1Arr);
        } 
  
    });
  
  }
  
  function toggleClasses(die) {
    die.classList.toggle("odd-roll");
    die.classList.toggle("even-roll");
  }
  
  function getRandomNumber(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  
  
  document.getElementById("roll-button").addEventListener("click", rollDice);
  
  [/code]

</p>


<p>[code]* {<br />
  margin: 0;<br />
  padding: 0;<br />
  vertical-align: baseline;<br />
}<br />
html {<br />
  font-family: system-ui, sans-serif;<br />
}<br />
body {<br />
  background: linear-gradient(#545454, #454545, #676767);<br />
  display: grid;<br />
  grid-template-columns: 1fr;<br />
  height: 100vh;<br />
  overflow: hidden;<br />
  width: 100%;<br />
}<br />
.dice {<br />
  align-items: center;<br />
  display: grid;<br />
  grid-gap: 2rem;<br />
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));<br />
  grid-template-rows: auto;<br />
  justify-items: center;<br />
  padding: 2rem;<br />
  perspective: 600px;<br />
}<br />
.die-list {<br />
  display: grid;<br />
  grid-template-columns: 1fr;<br />
  grid-template-rows: 1fr;<br />
  height: 6rem;<br />
  list-style-type: none;<br />
  transform-style: preserve-3d;<br />
  width: 6rem;<br />
}<br />
.even-roll {<br />
  transition: transform 1.5s ease-out;<br />
}<br />
.odd-roll {<br />
  transition: transform 1.25s ease-out;<br />
}<br />
.die-item {<br />
  box-shadow: inset -0.35rem 0.35rem 0.75rem rgba(143, 142, 142, 0.3),<br />
    inset 0.5rem -0.25rem 0.5rem rgba(176, 175, 175, 0.15);<br />
  display: grid;<br />
  grid-column: 1;<br />
  grid-row: 1;<br />
  grid-template-areas:<br />
    "one two three"<br />
    "four five six"<br />
    "seven eight nine";<br />
  grid-template-columns: repeat(3, 1fr);<br />
  grid-template-rows: repeat(3, 1fr);<br />
  height: 100%;<br />
  padding: 1rem;<br />
  width: 100%;<br />
}</p>
<p>.die-item2 {<br />
  box-shadow: inset -0.35rem 0.35rem 0.75rem rgba(0, 0, 0, 0.3),<br />
    inset 0.5rem -0.25rem 0.5rem rgba(0, 0, 0, 0.15);<br />
  display: grid;<br />
  grid-column: 1;<br />
  grid-row: 1;<br />
  grid-template-areas:<br />
    "one two three"<br />
    "four five six"<br />
    "seven eight nine";<br />
  grid-template-columns: repeat(3, 1fr);<br />
  grid-template-rows: repeat(3, 1fr);<br />
  height: 100%;<br />
  padding: 1rem;<br />
  width: 100%;<br />
}</p>
<p>.dot {<br />
  align-self: center;<br />
  background-color: white;<br />
  border-radius: 50%;<br />
  box-shadow: inset -0.15rem 0.15rem 0.25rem rgba(0, 0, 0, 0.5);<br />
  display: block;<br />
  height: 1.25rem;<br />
  justify-self: center;<br />
  width: 1.25rem;<br />
}</p>
<p>/* Dice Colors */</p>
<p>.die-item[data-side="6"] {<br />
  background-color: black;<br />
}<br />
.die-item[data-side="5"] {<br />
  background-color: black;<br />
}<br />
.die-item[data-side="4"] {<br />
  background-color: black;<br />
}<br />
.die-item[data-side="3"] {<br />
  background-color: black;<br />
}<br />
.die-item[data-side="2"] {<br />
  background-color: black;<br />
}<br />
.die-item[data-side="1"] {<br />
  background-color: black;<br />
}</p>
<p>/* Dice Colors 2  */</p>
<p>.die-item2[data-side="6"] {<br />
  background-color: red;<br />
}<br />
.die-item2[data-side="5"] {<br />
  background-color: red;<br />
}<br />
.die-item2[data-side="4"] {<br />
  background-color: red;<br />
}<br />
.die-item2[data-side="3"] {<br />
  background-color: red;<br />
}<br />
.die-item2[data-side="2"] {<br />
  background-color: red;<br />
}<br />
.die-item2[data-side="1"] {<br />
  background-color: red;<br />
}</p>
<p>.even-roll[data-roll="1"] {<br />
  transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);<br />
}<br />
.even-roll[data-roll="2"] {<br />
  transform: rotateX(450deg) rotateY(720deg) rotateZ(360deg);<br />
}<br />
.even-roll[data-roll="3"] {<br />
  transform: rotateX(360deg) rotateY(630deg) rotateZ(360deg);<br />
}<br />
.even-roll[data-roll="4"] {<br />
  transform: rotateX(360deg) rotateY(810deg) rotateZ(360deg);<br />
}<br />
.even-roll[data-roll="5"] {<br />
  transform: rotateX(270deg) rotateY(720deg) rotateZ(360deg);<br />
}<br />
.even-roll[data-roll="6"] {<br />
  transform: rotateX(360deg) rotateY(900deg) rotateZ(360deg);<br />
}<br />
.odd-roll[data-roll="1"] {<br />
  transform: rotateX(-360deg) rotateY(-720deg) rotateZ(-360deg);<br />
}<br />
.odd-roll[data-roll="2"] {<br />
  transform: rotateX(-270deg) rotateY(-720deg) rotateZ(-360deg);<br />
}<br />
.odd-roll[data-roll="3"] {<br />
  transform: rotateX(-360deg) rotateY(-810deg) rotateZ(-360deg);<br />
}<br />
.odd-roll[data-roll="4"] {<br />
  transform: rotateX(-360deg) rotateY(-630deg) rotateZ(-360deg);<br />
}<br />
.odd-roll[data-roll="5"] {<br />
  transform: rotateX(-450deg) rotateY(-720deg) rotateZ(-360deg);<br />
}<br />
.odd-roll[data-roll="6"] {<br />
  transform: rotateX(-360deg) rotateY(-900deg) rotateZ(-360deg);<br />
}<br />
[data-side="1"] {<br />
  transform: rotate3d(0, 0, 0, 90deg) translateZ(4rem);<br />
}<br />
[data-side="2"] {<br />
  transform: rotate3d(-1, 0, 0, 90deg) translateZ(4rem);<br />
}<br />
[data-side="3"] {<br />
  transform: rotate3d(0, 1, 0, 90deg) translateZ(4rem);<br />
}<br />
[data-side="4"] {<br />
  transform: rotate3d(0, -1, 0, 90deg) translateZ(4rem);<br />
}<br />
[data-side="5"] {<br />
  transform: rotate3d(1, 0, 0, 90deg) translateZ(4rem);<br />
}<br />
[data-side="6"] {<br />
  transform: rotate3d(1, 0, 0, 180deg) translateZ(4rem);<br />
}<br />
[data-side="1"] .dot:nth-of-type(1) {<br />
  grid-area: five;<br />
}<br />
[data-side="2"] .dot:nth-of-type(1) {<br />
  grid-area: one;<br />
}<br />
[data-side="2"] .dot:nth-of-type(2) {<br />
  grid-area: nine;<br />
}<br />
[data-side="3"] .dot:nth-of-type(1) {<br />
  grid-area: one;<br />
}<br />
[data-side="3"] .dot:nth-of-type(2) {<br />
  grid-area: five;<br />
}<br />
[data-side="3"] .dot:nth-of-type(3) {<br />
  grid-area: nine;<br />
}<br />
[data-side="4"] .dot:nth-of-type(1) {<br />
  grid-area: one;<br />
}<br />
[data-side="4"] .dot:nth-of-type(2) {<br />
  grid-area: three;<br />
}<br />
[data-side="4"] .dot:nth-of-type(3) {<br />
  grid-area: seven;<br />
}<br />
[data-side="4"] .dot:nth-of-type(4) {<br />
  grid-area: nine;<br />
}<br />
[data-side="5"] .dot:nth-of-type(1) {<br />
  grid-area: one;<br />
}<br />
[data-side="5"] .dot:nth-of-type(2) {<br />
  grid-area: three;<br />
}<br />
[data-side="5"] .dot:nth-of-type(3) {<br />
  grid-area: five;<br />
}<br />
[data-side="5"] .dot:nth-of-type(4) {<br />
  grid-area: seven;<br />
}<br />
[data-side="5"] .dot:nth-of-type(5) {<br />
  grid-area: nine;<br />
}<br />
[data-side="6"] .dot:nth-of-type(1) {<br />
  grid-area: one;<br />
}<br />
[data-side="6"] .dot:nth-of-type(2) {<br />
  grid-area: three;<br />
}<br />
[data-side="6"] .dot:nth-of-type(3) {<br />
  grid-area: four;<br />
}<br />
[data-side="6"] .dot:nth-of-type(4) {<br />
  grid-area: six;<br />
}<br />
[data-side="6"] .dot:nth-of-type(5) {<br />
  grid-area: seven;<br />
}<br />
[data-side="6"] .dot:nth-of-type(6) {<br />
  grid-area: nine;<br />
}</p>
<p>.result-table {<br />
  background-color: white;<br />
  text-decoration-color: black;<br />
  font-size: 1.25rem;<br />
  font-weight: 700;<br />
  justify-self: center;<br />
  padding: 0.5rem 1rem;<br />
}</p>
<p>.result1::after {<br />
  text-decoration: blue;<br />
  content: attr(data-roll);<br />
}</p>
<p>#result2 {<br />
  text-decoration: yellow;<br />
}</p>
<p>button {<br />
  align-self: center;<br />
  background-color: #efefef;<br />
  border: none;<br />
  color: #333;<br />
  font-size: 1.25rem;<br />
  font-weight: 700;<br />
  justify-self: center;<br />
  padding: 0.5rem 1rem;<br />
}<br />
button:hover {<br />
  cursor: pointer;<br />
}</p>
<p>@media (min-width: 900px) {<br />
  .dice {<br />
    perspective: 1300px;<br />
  }<br />
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Dice Game</title><link rel="preload" as="font" href="https://devsfix.com/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v2.2" type="font/woff2" crossorigin="anonymous" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="dice">
      <ol class="die-list even-roll" data-roll="1" id="die-1">
        <li class="die-item" data-side="1">
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="2">
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="3">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="4">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="5">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item" data-side="6">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
      </ol>
      <ol class="die-list odd-roll" data-roll="1" id="die-2">
        <li class="die-item2" data-side="1">
          <span class="dot"></span>
        </li>
        <li class="die-item2" data-side="2">
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item2" data-side="3">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item2" data-side="4">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item2" data-side="5">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
        <li class="die-item2" data-side="6">
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
          <span class="dot"></span>
        </li>
      </ol>
    </div>
    <button type="button" id="roll-button">Roll Dice</button>
    <div class="result-table">
      <h2>Results</h2>
        <div id="result1" > </div>
        <div id="result2"></div>
    </div>
    <script src="./app.js"></script>
  
</body>
</html>


<!-- <ol class="die-list odd-roll" data-roll="1" id="die-2">
  <li class="die-item" data-side="1">
    <span class="dot"></span>
  </li>
  <li class="die-item" data-side="2">
    <span class="dot"></span>
    <span class="dot"></span>
  </li>
  <li class="die-item" data-side="3">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </li>
  <li class="die-item" data-side="4">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </li>
  <li class="die-item" data-side="5">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </li>
  <li class="die-item" data-side="6">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </li>
</ol> -->

Answer:

You should put let res1Arr = [] outside the function, since it’s now returning to empty array on every function call. Also, to avoid double results in array on every function call, you should place array.push outside the forEach loop, since it’s iterating twice for each call.

If you have better answer, please add a comment about this, thank you!

Resolved: How to keep pushing new values from a dataset on click event to an array

Resolved: How applied a multiple textures images or one image into a cube in qt 6 with qml?

Resolved: More than one condition in CASE clause after renaming of column in SQL

Resolved: Filter objects with random number keys in Es6

Leave A Reply