title: How to make a function loop
body: <p>I'm trying to make function non() loop after 10 clicks. I've looked at other sources to help me do it but they didn't work. When i click the non button 10 times it shows an alert and when i click it 10 more times the alert dosen't appear. The loop needs to function every time the non button gets clicked 10 times. Here is my code.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var click = 9;
              function non(){
                  var i;
                  var message= document.getElementById("message");
          
          //Affiche un message chaque fois que le bouton non est cliquer
                  for(i=0; i&lt;1; i++) {
                  message.innerHTML += "Es-tu près !!OUI!! ou !!NON!!&lt;br&gt;";
                  
                  }
                  
                  if(!(click--)){
                      alert("Es-tu près");
                      non();
                      
  
                  }
                  document.getElementById("boutonNon").click;
                  
              }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>   
  .titre{
      width: 650px;
      margin: auto;
      text-align: center;
      border-radius: 35px;
      color: #000000;
      background-color: #498efd;
      padding: 5px;
      margin-bottom: 30px;
  
  }
  .bouton{
      transition-duration: 0.4s;
      border-width: 1px;
      cursor: pointer;
      
  
  }
  .boutonOui{
     background-color: rgb(234, 234, 234); 
  }
  
  .boutonOui:hover{
      background-color: rgb(177, 177, 177);
  }
  .paspres{
      width: 550px;
      margin: auto;
      margin-bottom: 25px;
      font-size-adjust: auto;
      
      
  
  
      padding-top: 5px;    
      padding-left: 30px;    
      height: auto;
      background-color: #cecece;
      max-width: 740px;
      max-height: 15s00px;
      border-radius: 45px;
  }
  .question{
      width: 550px;
      margin: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header"&gt;
              &lt;h1 class="titre"&gt;Quiz Vocabulaire&lt;/h1&gt;
              &lt;div id="hide1"&gt;    
                  &lt;div class="paspres"&gt;
                      &lt;br&gt;Es-tu près !!OUI!! ou !!NON!!
                      &lt;div id="message"&gt;&lt;/div&gt;&lt;br&gt;
                   &lt;/div&gt;
              &lt;/div&gt;  
          &lt;/div&gt;
          &lt;div class="question" id="hide2"&gt;
              &lt;button class="bouton boutonOui" id="boutonOui" onclick="window.location.href='jeu_educatifs2.html'"&gt;Oui&lt;/button&gt;
              &lt;div id="divNon"&gt;
                  &lt;button class="bouton boutonOui" id="boutonNon" onclick="non()" value="reset"&gt;Non&lt;/button&gt;
              &lt;/div&gt;
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  
  Don't click the yes button since it leads to another part of the quiz which i've not included and makes the the code preview a blank page.</p>