Sujet Précédent Sujet Suivant

Probleme de remplacement de lettre dans un pendu

Résolu/Fermé
unknow69250 Messages postés 10 Date d'inscription vendredi 1 mars 2019 Statut Membre Dernière intervention 9 mars 2019 - Modifié le 8 mars 2019 à 20:57
unknow69250 Messages postés 10 Date d'inscription vendredi 1 mars 2019 Statut Membre Dernière intervention 9 mars 2019 - 9 mars 2019 à 23:08
Bonjour, dans le cadre de ma formation de developpeur web je dois coder le jeu du pendu sur JS.
Je n'arrive pas à remplacer la lettre du mot caché qui s'affiche de cette façon "_ _ _ _ _ _"
si "a" est valide je souhaiterait qu'il s'affiche le bon nombre de fois et au bon emplacement dans mon mot.
Merci d'avance.

mon code :

HTML: 
<div class="container">
        <div class="row">
            <div class="col-12">
                <input id="entrerlettre" type="text" >
                <input type=submit  onclick="findLetter();">
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-12">
                <div id="mot" class="tailletext"></div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-12">
                <img id="imgbase" src="img/img1.jpg">
            </div>
        </div>
    </div>


JS: 

        tableau = ["tacos", "singe", "saxophone", "camping", "rinoceros", "volcan", "igloo", "moustique", "cameleon",
            "ananas"
        ]

        var nombreGenere = Math.floor(Math.random() * tableau.length);
        console.log(nombreGenere)
        var nombreLettre = 0;
        var faux = 0;
        var motCache = "";
        var lettretrouver = "";


        // recupere le mot en fonction du nombre genere
        motGenere = tableau[nombreGenere]

        // recupere le nombre de caractere ds le mot
        motGenereLength = motGenere.length;

        // boucle : tant que caractere ds mon mot afficher " _ "
        for (i = 0; i < motGenereLength; i++) {
            motCache = motCache + ' _ ';
           

        }

        console.log('mot cache' + motCache);

        document.getElementById("mot").innerHTML = motCache;

       
       
//trouver lettre

function findLetter (){
    lettretrouver = lettretrouver + entrerlettre.value;
    document.getElementById("entrerlettre").value;
    console.log("  lettre à trouver :" + lettretrouver);

    console.log("lettre choisi : " + entrerlettre);
}

       // replace la lettre ds le mot

       if (lettretrouver.includes(motCache)) {
            motCache = motCache + ' _ ';
            motCache=motCache.replace(' _ ', lettretrouver);}
            else {
                faux = faux++;
            }

        //changement d'image

function show_img (){
        if (faux = 1) {
            document.getElementById("imgbase").innerHTML = '< img src = "img/img2.jpg" >' ;
        }
        if (faux = 2) {
            document.getElementById("imgbase").innerHTML = '< img src = "img/img3.jpg" >' ;
        }
        if (faux = 3) {
            document.getElementById("imgbase").innerHTML = '< img src = "img/img4.jpg" >' ;
        }
        if (faux = 4) {
            document.getElementById("imgbase").innerHTML = '< img src = "img/img5.jpg" >' ;
        }
        if (faux = 5) {
            document.getElementById("imgbase").innerHTML = '< img src = "img/img6.jpg" >' ;
        }
        if (faux = 6) {
            document.getElementById("imgbase").innerHTML = '< img src = "img/img7.jpg" >' ;
            alert("Désolé , c'est fini. Le mot correct était :" +  motCache + " voulez-vous rejouer ?");
                    location.reload();
        }
    }



EDIT : AJOUT DES BALISES DE CODE
A voir également:

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38316 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 29 novembre 2024 4 705
8 mars 2019 à 21:07
Bonjour,

Plusieurs erreurs dans ton code...

Déjà 
 <input type=submit  onclick="findLetter();">

Même si "techniquement" ça peut fonctionner...... TOUS les attributs doivent avoir leurs valeurs entre QUOTES
Donc 
 <input type="submit"  onclick="findLetter();">

Ensuite... le type "submit" ne s'utilise que lorsqu'on a un "FORMULAIRE".
Hors ce n'est pas le cas ici.
Donc le type "button" serait mieux.

Ensuite... 
//trouver lettre

function findLetter (){
    lettretrouver = lettretrouver + entrerlettre.value;
    document.getElementById("entrerlettre").value;
    console.log("  lettre à trouver :" + lettretrouver);

    console.log("lettre choisi : " + entrerlettre);
}

       // replace la lettre ds le mot

       if (lettretrouver.includes(motCache)) {
            motCache = motCache + ' _ ';
            motCache=motCache.replace(' _ ', lettretrouver);}
            else {
                faux = faux++;
            }

        //changement d'image

ici : 
document.getElementById("entrerlettre").value;

Cette ligne... n'a aucune utilité... vu que tu n'en fais rien....
Du moins.. tu as oublié une parti du code... qui devrait donc être : 
var lettretrouver = document.getElementById("entrerlettre").value;


Tu as ensuite une accolade fermante.... mais qui n'est pas au bon endroit...
Elle devrait se situer à la fin de cette fonction....... pas en plein milieu avant tes if....

Pour ce qui est d'afficher les lettres '"trouvées" ... tu ne peux pas faire de "replace"...
Tu dois boucler sur chaque lettre du mot à trouver (motCache)... et au lieu de mettre un "_" afficher la lettre trouvée quand elle est bonne
un truc du genre: 
for (var i = 0; i < motCache.length; i++) {
  if(motCache.charAt(i) == lettretrouver  ){
    motCache  +=  lettretrouver  ;
 } else{
   motCache  +=  ' _ ';
  }
}
.


0
Réponse 2 / 3
unknow69250 Messages postés 10 Date d'inscription vendredi 1 mars 2019 Statut Membre Dernière intervention 9 mars 2019
9 mars 2019 à 19:39
Bonjour et merci de ta réponse, j'ai apporté les modification suggérée, cependant mon code n'est toujours pas valide.
mon précédent visuel m'indiquer comme mot caché :
"_ _ _ _ _ _ _ _"
Maintenant cela a disparu et donc les lettres n'apparaissent pas à l'endroit souhaitée ( elle n'apparaissent pas du tout hormis dans l'inspecteur).
0
jordane45 Messages postés 38316 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 29 novembre 2024 4 705
9 mars 2019 à 20:02
Sans voir tes modifications... impossible de te répondre.
Tu noteras au passage que je ne t'ai pas donné le code "exact" à écrire ... mais un piste de réflexion qu'il faut, bien entendu, adapter.
0
Réponse 3 / 3
unknow69250 Messages postés 10 Date d'inscription vendredi 1 mars 2019 Statut Membre Dernière intervention 9 mars 2019
9 mars 2019 à 20:09
HTML :


<!-- CONTENT START -->
<div class="container">
<div class="row">
<div class="col-12">
<input id="entrerlettre" type="text">
<input type="button" onclick="findLetter();">
</div>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-12">
<div id="mot" class="tailletext"></div>
</div>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-12">
<img id="imgbase" src="img/img1.jpg">
</div>
</div>
</div>


<!-- CONTENT END -->






JS :


<script>
tableau = ["tacos", "singe", "saxophone", "camping", "rinoceros", "volcan", "igloo", "moustique", "cameleon",
"ananas"
]

var nombreGenere = Math.floor(Math.random() * tableau.length);
console.log(nombreGenere)
var nombreLettre = 0;
var faux = 0;
var motCache = "";
//var lettretrouver = "";
var lettretrouver = document.getElementById("entrerlettre").value;

// recupere le mot en fonction du nombre genere
motGenere = tableau[nombreGenere]

// recupere le nombre de caractere ds le mot
motGenereLength = motGenere.length;

// boucle : tant que caractere ds mon mot afficher " _ "
for (var i = 0; i < motCache.length; i++) {
motCache = motCache + ' _ ';
if(motCache.charAt(i) == lettretrouver ){
motCache += lettretrouver ;
} else{
motCache += ' _ ';
faux = faux++;
}
}

// for (i = 0; i < motGenereLength; i++) {
// motCache = motCache + ' _ ';


//}

console.log('mot cache' + motCache);

document.getElementById("mot").innerHTML = motCache;



//trouver lettre

function findLetter() {
lettretrouver = lettretrouver + entrerlettre.value;
//document.getElementById("entrerlettre").value;
console.log(" lettre à trouver :" + lettretrouver);

console.log("lettre choisi : " + entrerlettre);


// replace la lettre ds le mot

//if (lettretrouver.includes(motCache)) {
// motCache = motCache + ' _ ';
// motCache=motCache.replace(' _ ', lettretrouver);}
// else {
// faux = faux++;
// }
}

//changement d'image

function show_img() {
if (faux = 1) {
document.getElementById("imgbase").innerHTML = '< img src = "img/img2.jpg" >';
}
if (faux = 2) {
document.getElementById("imgbase").innerHTML = '< img src = "img/img3.jpg" >';
}
if (faux = 3) {
document.getElementById("imgbase").innerHTML = '< img src = "img/img4.jpg" >';
}
if (faux = 4) {
document.getElementById("imgbase").innerHTML = '< img src = "img/img5.jpg" >';
}
if (faux = 5) {
document.getElementById("imgbase").innerHTML = '< img src = "img/img6.jpg" >';
}
if (faux = 6) {
document.getElementById("imgbase").innerHTML = '< img src = "img/img7.jpg" >';
alert("Désolé , c'est fini. Le mot correct était :" + motCache + " voulez-vous rejouer ?");
location.reload();
}
}
</script>
0
jordane45 Messages postés 38316 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 29 novembre 2024 4 705
9 mars 2019 à 20:46
A l'avenir... merci de ne pas oublier d'utiliser les BALISES DE CODE pourposter ton code !

Ensuite.. voici 
<!DOCTYPE html>
<html>
    <head>
        <title>TEST</title>
        <meta charset="utf8">
    </head>
    <body>
    <div class="container">
      <div class="row">
        <div class="col-12">
          <input id="entrerlettre" type="text">
          <input type="button" onclick="findLetter();">
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <div id="mot" class="tailletext"></div>
        </div>
      </div>
    </div>

    <script>
    var nombreLettre = 0;
    var faux = 0;
    var motGenere = "";
    var tblmotcache = [];
    function choisirMot(){
      var tableau = ["tacos", "singe", "saxophone", "camping", "rinoceros", "volcan", "igloo", "moustique", "cameleon","ananas" ];
      var nombreGenere = Math.floor(Math.random() * tableau.length);
      return  tableau[nombreGenere]       
    }
    
    function findLetter() {
      var result=[];
      var lettretrouver = document.getElementById("entrerlettre").value;
      console.log('FindLetter',lettretrouver);
      console.log('mot à trouver :' , motGenere,'Length:',motGenere.length);
     
      for (var i = 0; i < motGenere.length; i++) {
        var lettreMot = motGenere.charAt(i);
        var lettreDejaTrouvee = tblmotcache[i];
        console.log(i,lettreMot,lettreDejaTrouvee);
        
        if(lettreMot == lettretrouver ){
          result.push(lettretrouver);
        }else if(typeof(lettreDejaTrouvee)!='undefined' && lettreDejaTrouvee != "" && lettreDejaTrouvee != '_'){
          result.push(lettreDejaTrouvee);
        }else{
          result.push('_');          
        }
      }
      tblmotcache = result;
      document.getElementById("entrerlettre").value = "";
      afficherMotCache();
    }
    
    function afficherMotCache(){
      var motcache = "";
      for(var i=0; i<tblmotcache.length;i++){
        motcache += ' ' + tblmotcache[i];
      }
      document.getElementById("mot").innerHTML = motcache;
    }

      /**
      * DEBUT DU PROGRAMME
      */
      var motGenere = choisirMot();
      findLetter();
   
    </script>
    </body>
</html>
0
unknow69250 Messages postés 10 Date d'inscription vendredi 1 mars 2019 Statut Membre Dernière intervention 9 mars 2019
9 mars 2019 à 23:08
merci pour ta réponse, ca marche maintenant, je n'ai plus qu'à approfondir mon code pour que se soit un programme complet.
0

Discussions similaires

Formule Excel pour afficher les mois (chiffres) en lettre
castelc -
-2-2 -

23 réponses