title: stop a forloop or function
body: <p>I would like some help an advice on how i can get the for loop to stop 
  after 20 numbers are drawn out to perspective div. I have tried a stop 
  function/ clear interval , set timeout etc. What the best way to 
  achieve  this as i am stuck on what is the best approach</p>
  
  <pre><code>enter code here 
    function lottoNumbers()
    {
      var lottoNums = [];
  
      for(var i=0; i &lt;1 ; i++)
      {
        var temp =Math.floor(Math.random() * 80 + 1);
        if(lottoNums.indexOf(temp) == -1)
  
        {
  
          lottoNums.push(temp);
          document.getElementById('square' + temp).innerHTML = lottoNums[i];
                  document.getElementById('square0').innerHTML = lottoNums[i];
        }
        else
        {
          i--;
        }
      }
    }
  
  //test resizing div
  function alterSize(type) {
   var targetDiv = document.querySelector("#square0");
   targetDiv.classList.add(type);
   setTimeout(function(){
    targetDiv.classList.remove(type);
    }, 2000)
  }
  
  
  /*
  onload="setInterval(lottoNumbers, 3000);
  */
    &lt;/script&gt;
  
  &lt;/head&gt;
  
  
  &lt;body bgcolor="lightblue" onload="setInterval(start, 3500)" &gt;
    &lt;h1&gt;&lt;center&gt;GENERATE LOTTO NUMBERS&lt;/center&gt;&lt;/h1&gt;
  </code></pre>