Im trying to get each "onclick" event to repaet the function-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

<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>