im trying to get a diffrent values of the array and print them each time the user clicking the button.
`
<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 lottery inside of the function so it refreshes. You're looping to until lottery.length < 7. When you do this and you declare lottery[] outside of the function scope and push 7 values to it, the lottery[] will never trigger the for loop. Consider also moving the HTML and console.log(lottery) to outside of the loop so that they only update once as opposed to every iteration
<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>You need to reset lottery each time loto is invoked. So basically just do lottery = [] after declaring 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>