Trouver les mots manquants

Fermé

nicolas - 5 oct. 2021 à 10:32
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 6 oct. 2021 à 19:24

Bonjour,
Je suis nouveau en Javascript et je fais un projet appelé "N'oubliez pas les paroles de la musique". J'ai réussi à faire en sorte qu'il vérifie si le mot inséré est le bon, mais je voulais qu'il vérifie qu'une fois que toutes les cases sont vertes un bouton apparaît pour passer à une autre musique et compter les points que l'utilisateur a gagnés jusqu'à présent, mais je ne sais pas comment en javascript sélectionner toutes les cases et vérifier si elles sont vertes...

<form name="Form" action="#"  method="post" class="validation">
        <div>
          <input type="text" id="Mot1" size="2" name="Mot1">
          <input type="text" id="Mot2" size="1" name="Mot2">
          <input type="text" id="Mot3" size="4" name="Mot3">
          <input type="text" id="Mot4" size="6" name="Mot4">
          <input type="text" id="Mot5" size="1" name="Mot5">
          <input type="text" id="Mot6" size="1" name="Mot6"><br><br>
          <input type="text" id="Mot7" size="8" name="Mot7">
          <input type="text" id="Mot8" size="1" name="Mot8">
          <input type="text" id="Mot9" size="3" name="Mot9">
        </div>
        <br>
 
        <div class="buttons">
          <button type="button" id="btn" class="button2">Valider ses paroles</button>
          <input type="reset" value="Recommencer" name="Reset" class="button3">
          <a href="#" class="ok">Next</a>
        </div>
      </form>
 
 
      <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script>
$(document).ready(function(){
$("#btn").click(function(){
var str1 = $("#Mot1").val();
if (str1 == "Pour"){
  $("#Mot1").css('background', 'green');
}
else{
  $("#Mot1").css('background', 'red');
}
 
 
var str2 = $("#Mot2").val();
if (str2 == "être"){
  $("#Mot2").css('background', 'green');
}
else{
  $("#Mot2").css('background', 'red');
}

Configuration: Windows / Chrome 94.0.4606.61

A voir également:

Trouver les mots manquants
Trouver adresse mac - Guide
Où trouver tous les mots de passe enregistrés ? - Guide
Comment trouver le mot de passe wifi sur son téléphone - Guide
Trouver un lieu avec coordonnées gps - Guide
Où trouver l'autorité de délivrance ? ✓ - Forum Vos droits sur internet

1 réponse

Réponse 1 / 1

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
6 oct. 2021 à 19:24

Bonjour,

A partir de ton code, une solution simple serait d'ajouter une variable de type booléen au début de la fonction "click" sur le bouton "Valider ses paroles".
Ce booléen permettra de savoir si tous les mots ont été trouvés (il aura alors la valeur true) ou si au moins un mot n'est pas correct (il aura alors la valeur false).

Il faut initialiser ce booléen à true (avant de vérifier chaque mot, on considère qu'ils sont tous trouvés) puis il suffira de le passer à false si un mot n'est pas correct lors de la vérification de chaque mot.
Après avoir vérifié tous les mots, on peut simplement afficher le bouton Next selon la valeur de ce booléen (par défaut le bouton Next devrait être masqué au chargement de la page, par exemple via un

display:none;

en CSS) :

$(document).ready(function(){
  $("#btn").click(function(){
    var isValidForm = true;

    var str1 = $("#Mot1").val();
    if (str1 == "Pour"){
      $("#Mot1").css('background', 'green');
    }
    else{
      $("#Mot1").css('background', 'red');
      isValidForm = false;
    }

    var str2 = $("#Mot2").val();
    if (str2 == "être"){
      $("#Mot2").css('background', 'green');
    }
    else{
      $("#Mot2").css('background', 'red');
      isValidForm = false;
    }

    // [...] Vérifications des autres mots

    if (isValidForm) {
      // tous les mots sont valides
      $(".ok").show();
    } else {
      // au moins un mot n'est pas valide
      $(".ok").hide();
    }
  });
});

Trouver les mots manquants

1 réponse

Discussions similaires

Newsletters