Javascript - comptage simple

Question

Ceci est mon premier message et deuxième jour avec Javascript;). J'essaie de créer un formulaire simple, qui:

1. Permet à l'utilisateur de mettre une lettre/lettre dans un champ de saisie.
2. Que je veux l'envoyer à mon script et:
   a) vérifier si quelque chose a été donné sous une forme
   b) si l'utilisateur a mis un signe que je veux le mettre dans un tableau et compter le nombre de essaie
   c) si le nombre d'essais atteignent 10 Je veux arrêter le script

Mon script ne remeber pas le nombre d'essais. De plus, il enregistre les données dans un tableau mais une fois le script terminé, il efface tout (je mets un peu de console.log() dans le script, pour voir s'il fait quoi que ce soit). Il semble que mon nombre de variables ne se souvient pas du nombre d'essais :(.

Comment puis-je résoudre ce problème? - mais d'une manière simple de codage :) (Je ne veux pas faire beaucoup de changements dans mon code)

<script type= "text/javascript"> 

var given_letters = []; // create an empty array 

function givenLetter() { 
    var count = 0; 
    var max_count = 10; 
    var letter = document.getElementById('letter').value; 

    while (count < max_count) { 
     if (letter === "") { 
      alert("No letter given");   
      return false; 
     } else {    
      count++; 
      given_letters.unshift(letter); 
      console.log(letter); // returns letter 
      console.log(given_letters); // returns array with 1 element 
      console.log(count); // returns "1" 
      alert("OK"); 
      return true; 
     } 
    } 
    while (count === max_count) { 
     alert("Sorry. You exceeded the limit of tries."); 
     return false; 
    } 
}      
</script> 


// in BODY section 
    <div> 
     <form><p>Put your letter here: <input type="text" id="letter" size="5" required><button onclick="givenLetter();">Send</button></p></form> 
    </div> 

Answer 1

essayer. Depuis le bouton i dans la balise de formulaire, le comportement par défaut du bouton est submit. donc le formulaire sera soumis et rechargera la page. Donc, pour éviter ce comportement, nous utilisons event.preventDefault(); et comptons comme une variable globale.

var given_letters = []; // create an empty array 
 
var count = 0; 
 
    
 

 
function givenLetter() { 
 
    event.preventDefault(); //to prevent reloading the page. 
 
    var max_count = 10; 
 
    var letter = document.getElementById('letter').value; 
 

 
    while (count < max_count) { 
 
     if (letter === "") { 
 
      alert("No letter given");   
 
      return false; 
 
     } 
 
     else {    
 
      count++; 
 
      given_letters.unshift(letter); 
 
      console.log(letter); // returns letter 
 
      console.log(given_letters); // returns array with 1 element 
 
      console.log(count); // returns "1" 
 
      alert("OK"); 
 
      return true; 
 
     } 
 
    } 
 
    while (count === max_count) { 
 
     alert("Sorry. You exceeded the limit of tries."); 
 
     return false; 
 
    } 
 
}  

<div> 
 
      <form> 
 
      <p>Put your letter here: <input type="text" id="letter" size="5" required> 
 
      <button onclick="givenLetter();">Send</button></p></form> 
 
     </div>

Answer 2

le comportement par défaut d'un bouton dans un formulaire doit soumettre le formulaire ... et recharger la page (tout à fait stupide, OMI). C'est pourquoi votre script ne semble se souvenir de rien. Mais il y a un moyen d'empêcher cela. Également, écrire var count = 0;en dehors de la fonction, sinon il est mis à 0 à chaque fois que la fonction est appelée.

var count = 0; 

function givenLetter(event) { 
    event.preventDefault(); 
    // .... 

Answer 3

Vous pouvez utiliser given_letters.length au lieu de count, moins de code et son la même valeur, vous devez utiliser e.preventDefault(); de sorte que le formulaire ne marche pas soumettre la forme encore, here est un exemple de travail, pour e.preventDefault(); vous travailler besoin envoyer l'événement dans le bouton, comme ceci:

<div> 
     <form>  
     <p>Put your letter here: <input type="text" id="letter" size="5" required> 
     <button onclick="givenLetter(event);">Send</button></p> 
     </form> 
    </div> 

JS mise à jour:

var given_letters = []; // create an empty array 
function givenLetter(e) { 
    e.preventDefault(); 
    var max_count = 10; 
    var letter = document.getElementById('letter').value; 

    while (given_letters.length <= max_count) { 
     if (letter === "") { 
      alert("No letter given");   
      return false; 
     } 
     else {    
      given_letters.unshift(letter); 
      console.log(letter); // returns letter 
      console.log(given_letters); // returns array with 1 element 
      console.log(given_letters.length);//here is your count already 
      alert("OK"); 
      return true; 
     } 
    } 
    while (given_letters.length === max_count) { 
     alert("Sorry. You exceeded the limit of tries."); 
     return false; 
    } 
}