Menu

Probleme de remplacement de lettre dans un pendu [Résolu]

Messages postés
10
Date d'inscription
vendredi 1 mars 2019
Dernière intervention
9 mars 2019
-
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
Afficher la suite 

Votre réponse

3 réponses

Messages postés
25047
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
26 mars 2019
1915
0
Merci
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  +=  ' _ ';
  }
}
.


Commenter la réponse de jordane45
Messages postés
10
Date d'inscription
vendredi 1 mars 2019
Dernière intervention
9 mars 2019
0
Merci
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).
jordane45
Messages postés
25047
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
26 mars 2019
1915 -
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.
Commenter la réponse de unknow69250
Messages postés
10
Date d'inscription
vendredi 1 mars 2019
Dernière intervention
9 mars 2019
0
Merci
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>
jordane45
Messages postés
25047
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
26 mars 2019
1915 -
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>
unknow69250
Messages postés
10
Date d'inscription
vendredi 1 mars 2019
Dernière intervention
9 mars 2019
-
merci pour ta réponse, ca marche maintenant, je n'ai plus qu'à approfondir mon code pour que se soit un programme complet.
Commenter la réponse de unknow69250