How to keep pushing new values from a dataset on click event to an array-CodePudding

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() {
    const dice = [...document.querySelectorAll(".die-list")];
    dice.forEach(die => {
      toggleClasses(die);
      die.dataset.roll = getRandomNumber(1, 6);
      let res1 = document.getElementById("die-1").dataset.roll;
      let res2 = document.getElementById("die-2").dataset.roll;
      let res1Num = parseInt(res1);
    
      let resConten1 = document.getElementById("result1");
      let resConten2 = document.getElementById("result2");
      resConten1.innerHTML = res1;
      resConten2.innerHTML = res2;
      
      // Results Array 
      let res1Arr = [];
      console.log(res1Arr);
  
       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);

* {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}
html {
  font-family: system-ui, sans-serif;
}
body {
  background: linear-gradient(#545454, #454545, #676767);
  display: grid;
  grid-template-columns: 1fr;
  height: 100vh;
  overflow: hidden;
  width: 100%;
}
.dice {
  align-items: center;
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  grid-template-rows: auto;
  justify-items: center;
  padding: 2rem;
  perspective: 600px;
}
.die-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  height: 6rem;
  list-style-type: none;
  transform-style: preserve-3d;
  width: 6rem;
}
.even-roll {
  transition: transform 1.5s ease-out;
}
.odd-roll {
  transition: transform 1.25s ease-out;
}
.die-item {
  box-shadow: inset -0.35rem 0.35rem 0.75rem rgba(143, 142, 142, 0.3),
    inset 0.5rem -0.25rem 0.5rem rgba(176, 175, 175, 0.15);
  display: grid;
  grid-column: 1;
  grid-row: 1;
  grid-template-areas:
    "one two three"
    "four five six"
    "seven eight nine";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  height: 100%;
  padding: 1rem;
  width: 100%;
}

.die-item2 {
  box-shadow: inset -0.35rem 0.35rem 0.75rem rgba(0, 0, 0, 0.3),
    inset 0.5rem -0.25rem 0.5rem rgba(0, 0, 0, 0.15);
  display: grid;
  grid-column: 1;
  grid-row: 1;
  grid-template-areas:
    "one two three"
    "four five six"
    "seven eight nine";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  height: 100%;
  padding: 1rem;
  width: 100%;
}


.dot {
  align-self: center;
  background-color: white;
  border-radius: 50%;
  box-shadow: inset -0.15rem 0.15rem 0.25rem rgba(0, 0, 0, 0.5);
  display: block;
  height: 1.25rem;
  justify-self: center;
  width: 1.25rem;
}





/* Dice Colors */

.die-item[data-side="6"] {
  background-color: black;
}
.die-item[data-side="5"] {
  background-color: black;
}
.die-item[data-side="4"] {
  background-color: black;
}
.die-item[data-side="3"] {
  background-color: black;
}
.die-item[data-side="2"] {
  background-color: black;
}
.die-item[data-side="1"] {
  background-color: black;
}

/* Dice Colors 2  */

.die-item2[data-side="6"] {
  background-color: red;
}
.die-item2[data-side="5"] {
  background-color: red;
}
.die-item2[data-side="4"] {
  background-color: red;
}
.die-item2[data-side="3"] {
  background-color: red;
}
.die-item2[data-side="2"] {
  background-color: red;
}
.die-item2[data-side="1"] {
  background-color: red;
}


.even-roll[data-roll="1"] {
  transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
}
.even-roll[data-roll="2"] {
  transform: rotateX(450deg) rotateY(720deg) rotateZ(360deg);
}
.even-roll[data-roll="3"] {
  transform: rotateX(360deg) rotateY(630deg) rotateZ(360deg);
}
.even-roll[data-roll="4"] {
  transform: rotateX(360deg) rotateY(810deg) rotateZ(360deg);
}
.even-roll[data-roll="5"] {
  transform: rotateX(270deg) rotateY(720deg) rotateZ(360deg);
}
.even-roll[data-roll="6"] {
  transform: rotateX(360deg) rotateY(900deg) rotateZ(360deg);
}
.odd-roll[data-roll="1"] {
  transform: rotateX(-360deg) rotateY(-720deg) rotateZ(-360deg);
}
.odd-roll[data-roll="2"] {
  transform: rotateX(-270deg) rotateY(-720deg) rotateZ(-360deg);
}
.odd-roll[data-roll="3"] {
  transform: rotateX(-360deg) rotateY(-810deg) rotateZ(-360deg);
}
.odd-roll[data-roll="4"] {
  transform: rotateX(-360deg) rotateY(-630deg) rotateZ(-360deg);
}
.odd-roll[data-roll="5"] {
  transform: rotateX(-450deg) rotateY(-720deg) rotateZ(-360deg);
}
.odd-roll[data-roll="6"] {
  transform: rotateX(-360deg) rotateY(-900deg) rotateZ(-360deg);
}
[data-side="1"] {
  transform: rotate3d(0, 0, 0, 90deg) translateZ(4rem);
}
[data-side="2"] {
  transform: rotate3d(-1, 0, 0, 90deg) translateZ(4rem);
}
[data-side="3"] {
  transform: rotate3d(0, 1, 0, 90deg) translateZ(4rem);
}
[data-side="4"] {
  transform: rotate3d(0, -1, 0, 90deg) translateZ(4rem);
}
[data-side="5"] {
  transform: rotate3d(1, 0, 0, 90deg) translateZ(4rem);
}
[data-side="6"] {
  transform: rotate3d(1, 0, 0, 180deg) translateZ(4rem);
}
[data-side="1"] .dot:nth-of-type(1) {
  grid-area: five;
}
[data-side="2"] .dot:nth-of-type(1) {
  grid-area: one;
}
[data-side="2"] .dot:nth-of-type(2) {
  grid-area: nine;
}
[data-side="3"] .dot:nth-of-type(1) {
  grid-area: one;
}
[data-side="3"] .dot:nth-of-type(2) {
  grid-area: five;
}
[data-side="3"] .dot:nth-of-type(3) {
  grid-area: nine;
}
[data-side="4"] .dot:nth-of-type(1) {
  grid-area: one;
}
[data-side="4"] .dot:nth-of-type(2) {
  grid-area: three;
}
[data-side="4"] .dot:nth-of-type(3) {
  grid-area: seven;
}
[data-side="4"] .dot:nth-of-type(4) {
  grid-area: nine;
}
[data-side="5"] .dot:nth-of-type(1) {
  grid-area: one;
}
[data-side="5"] .dot:nth-of-type(2) {
  grid-area: three;
}
[data-side="5"] .dot:nth-of-type(3) {
  grid-area: five;
}
[data-side="5"] .dot:nth-of-type(4) {
  grid-area: seven;
}
[data-side="5"] .dot:nth-of-type(5) {
  grid-area: nine;
}
[data-side="6"] .dot:nth-of-type(1) {
  grid-area: one;
}
[data-side="6"] .dot:nth-of-type(2) {
  grid-area: three;
}
[data-side="6"] .dot:nth-of-type(3) {
  grid-area: four;
}
[data-side="6"] .dot:nth-of-type(4) {
  grid-area: six;
}
[data-side="6"] .dot:nth-of-type(5) {
  grid-area: seven;
}
[data-side="6"] .dot:nth-of-type(6) {
  grid-area: nine;
}

.result-table {
  background-color: white;
  text-decoration-color: black;
  font-size: 1.25rem;
  font-weight: 700;
  justify-self: center;
  padding: 0.5rem 1rem;
}

.result1::after {
  text-decoration: blue;
  content: attr(data-roll);
}

#result2 {
  text-decoration: yellow;
}


button {
  align-self: center;
  background-color: #efefef;
  border: none;
  color: #333;
  font-size: 1.25rem;
  font-weight: 700;
  justify-self: center;
  padding: 0.5rem 1rem;
}
button:hover {
  cursor: pointer;
}

@media (min-width: 900px) {
  .dice {
    perspective: 1300px;
  }
}

<!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="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div >
      <ol  data-roll="1" id="die-1">
        <li  data-side="1">
          <span ></span>
        </li>
        <li  data-side="2">
          <span ></span>
          <span ></span>
        </li>
        <li  data-side="3">
          <span ></span>
          <span ></span>
          <span ></span>
        </li>
        <li  data-side="4">
          <span ></span>
          <span ></span>
          <span ></span>
          <span ></span>
        </li>
        <li  data-side="5">
          <span ></span>
          <span ></span>
          <span ></span>
          <span ></span>
          <span ></span>
        </li>
        <li  data-side="6">
          <span ></span>
          <span ></span>
          <span ></span>
          <span ></span>
          <span ></span>
          <span ></span>
        </li>
      </ol>
      <ol  data-roll="1" id="die-2">
        <li  data-side="1">
          <span ></span>
        </li>
        <li  data-side="2">
          <span ></span>
          <span ></span>
        </li>
        <li  data-side="3">
          <span ></span>
          <span ></span>
          <span ></span>
        </li>
        <li  data-side="4">
          <span ></span>
          <span ></span>
          <span ></span>
          <span ></span>
        </li>
        <li  data-side="5">
          <span ></span>
          <span ></span>
          <span ></span>
          <span ></span>
          <span ></span>
        </li>
        <li  data-side="6">
          <span ></span>
          <span ></span>
          <span ></span>
          <span ></span>
          <span ></span>
          <span ></span>
        </li>
      </ol>
    </div>
    <button type="button" id="roll-button">Roll Dice</button>
    <div >
      <h2>Results</h2>
        <div id="result1" > </div>
        <div id="result2"></div>
    </div>
    <script src="./app.js"></script>
  </body>
</html>


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

CodePudding user response：

You should put let res1Arr = []; outside the function, since it's now returning to empty array on every function call.