Estoy tratando de obtener valores diferentes de la matriz e imprimirlos cada vez que el usuario hace clic en el botón.
`
<p id="demo" style="display: none"></p> <button id="myB" onclick="loto()" style="background: #26a775; font-family: Monospace; border-radius: 15%" > And The Numbers Are </button> <script> const lottery = []; function loto() { for (let i = 0; lottery.length < 7; i++) { let index = Math.floor(1 + Math.random() * 32); if (!lottery.includes(index)) { //if lottery not includes this specific index >> lottery.push(index); } //push the index demo.style.display = "block"; demo.style.color = "#ff7300"; demo.innerHTML = lottery; } } console.log(lottery); </script> `Declare lotería dentro de la función para que se actualice. Está recorriendo hasta lottery.length < 7. Cuando hace esto y declara lottery[] fuera del alcance de la función y le agrega 7 valores, lottery[] nunca activará el ciclo for. Considere también mover HTML y console.log (lotería) fuera del ciclo para que solo se actualicen una vez en lugar de cada iteración
<script> function loto() { //now inside of function. each time loto() is called, a new array will be there. const lottery = []; for (let i = 0; lottery.length < 7; i++) { let index = Math.floor(1 + Math.random() * 32); if (!lottery.includes(index)) { //if lottery not includes this specific index >> lottery.push(index); } //push the index } //now outside of loop// demo.style.display = "block"; demo.style.color = "#ff7300"; demo.innerHTML = lottery; console.log(lottery); } </script> <p id="demo" style="display: none"></p> <button id="myB" onclick="loto()" style="background: #26a775; font-family: Monospace; border-radius: 15%" > And The Numbers Are </button> <script> const demo = document.querySelector("#demo"); let lottery = []; function loto() { for (let i = 0; lottery.length < 7; i++) { let index = Math.floor(1 + Math.random() * 32); if (!lottery.includes(index)) { //if lottery not includes this specific index >> lottery.push(index); } //push the index } demo.style.display = "block"; demo.style.color = "#ff7300"; demo.innerHTML = lottery.join(" "); // console.log(lottery); this will print the new numbers in the array lottery = []; } </script>Debe restablecer la lottery cada vez que se invoque loto . Así que básicamente haz lottery = [] después de declarar loto :
<p id="demo" style="display: none"></p> <button id="myB" onclick="loto()" style="background: #26a775; font-family: Monospace; border-radius: 15%" > And The Numbers Are </button> <script> const demo = document.querySelector("#demo"); function loto() { const lottery = []; for (let i = 0; lottery.length < 7; i++) { let index = Math.floor(1 + Math.random() * 32); if (!lottery.includes(index)) { //if lottery not includes this specific index >> lottery.push(index); } //push the index demo.style.display = "block"; demo.style.color = "#ff7300"; demo.innerHTML = lottery.join(" "); } console.log(lottery); } </script>