Sujet Précédent Sujet Suivant

Programme Guess The Number

Résolu/Fermé
iamtheone Messages postés 39 Date d'inscription lundi 10 avril 2017 Statut Membre Dernière intervention 8 mai 2017 - 19 avril 2017 à 12:37
iamtheone Messages postés 39 Date d'inscription lundi 10 avril 2017 Statut Membre Dernière intervention 8 mai 2017 - 19 avril 2017 à 15:10
Bonjour,
Je suis en train d'apprendre le javascript et j'ai essayé de faire un programme "guess the number" classique. Mais celui-ci ne marche pas... Et même avec les "indications" de la console je ne trouve pas les erreurs.

Voici mon code html : 
<!DOCTYPE html>
<html>
    <head>
        <title>Guess the number</title>
    </head>
    <body onLoad="reset()">
        <h2>Guess the number HTML/CSS/JS</h2>
            <p><a href="">Cliquez ici</a> pour découvrir la manière la plus rapide de deviner un nombre compris entre x et y.</p>
        <hr />
            <input type="submit" value="Actualiser" onClick="reset()">
            <p>Vous devez deviner le nombre z compris entre <span id="x"></span> et <span id="y"></span>.</p>
            <p id="so" align="center" color="red"></p>
            <form name="form">
                <input type="number" name="number" value="0"><br /><br />
                <input type="submit" name="submit" value="Soumettre"  onClick="submit()"><br />
            </form>
        <p>Votre nombre d'essais : <span id="trys"></span></p><br /><br /><br /><br /><br /><br />
    </body>
</html>


Et voici mon code javascript : 
window.onload = function() {

function reset() {

    x = Math.floor(Math.random() * (-101));
    document.getElementById("x").innerHTML =     "'+x+'";
    y = Math.floor(Math.random() * 101);
    document.getElementById("y").innerHTML = "'+y+'";
    z = Math.random() * (y - x) + x;
    trys = 0;
    document.getElementById("trys").innerHTML = "'+trys+'";

}

function submit() {

    var ztry =     eval(document.form.number.value);
    trys++;
    var so = document.getElementById("so");

    if (ztry > z) {
        so.innerHTML = "c'est moins";
    } elseif (ztry < z) {
        so.innerHTML = "c'est plus";
    } elseif (ztry == z) {
        so.innerHTML = "c'est gagné !!!";
    } else {
        so.innerHTML = "Merci d'entrer un nombre valide.";
        trys--;
    }

}

}


Je tiens à préciser que j'utilise "sololearn" comme compiler.
Merci de me révéler les erreurs que vous voyez. ;)

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
19 avril 2017 à 15:01
Voici le code corrigé 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Guess the number</title>
  </head>
  <body onLoad="reset();">
 
    <h2>Guess the number HTML/CSS/JS</h2>
    <p><a href="">Cliquez ici</a> pour découvrir la manière la plus rapide de deviner un nombre compris entre x et y.</p>
    <hr />
    <input type="button" value="Actualiser" onClick="reset()">
    <p>Vous devez deviner le nombre z compris entre <span id="x"></span> et <span id="y"></span>.</p>
    <p id="so" align="center" color="red"></p>
    <input type="number" id="number" value="0"> 
    <input type="button" name="submit" value="Soumettre" onClick="verifier();"><br />
    <p>Votre nombre d'essais : <span id="trys"></span></p><br /><br /><br /><br /><br /><br />

    <script type="text/javascript">
      //declaration des variables "globales" en dehors de toute fonction.
       var x;
       var y;
       var z = 0;
       var trys;
      function reset() {
        x = Math.floor(Math.random() * (0));
        document.getElementById("x").innerHTML =  x;
        y = Math.floor(Math.random() * 101);
        document.getElementById("y").innerHTML = y;
        z = parseInt(Math.random() * (y - x) + x);
        trys = 0;
        document.getElementById("trys").innerHTML = trys;
      }

      function verifier() {
        var reponse = "";
        var ztry = parseInt(document.getElementById('number').value);
        trys = parseInt(document.getElementById('trys').innerHTML);
        trys++;

        console.log( "z : " + z + " -> ztry: " + ztry);       
        if (ztry > z) {
           reponse = "c'est moins";
        } else if (ztry < z) {
          reponse = "c'est plus";
        } else if (ztry == z) {
          reponse = "c'est gagné !!!";
        } else {
          reponse = "Merci d'entrer un nombre valide.";
          trys--;
        }
        document.getElementById("so").innerHTML = reponse;
        document.getElementById("trys").innerHTML = trys;
      }
   </script>    
  </body>
</html>


Il manquait plein de choses ... comme par exemple la déclaration des variables "globales" x y z ...
1
iamtheone Messages postés 39 Date d'inscription lundi 10 avril 2017 Statut Membre Dernière intervention 8 mai 2017
19 avril 2017 à 15:10
Un grand merci, ça marche très bien. Je vais regarder comment tu as fais pour ne plus faire les mêmes erreurs.
0
Réponse 2 / 3
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
19 avril 2017 à 12:43
Bonjour,

Remplace 
  <input type="number" name="number" value="0">
 <input type="submit" name="submit"  value="Soumettre"  onClick="submit()">

par : 
 <input type="number" id="number" value="0">
 <input type="button" name="submit"  value="Soumettre"  onClick="submit()">


et dans le js 
 var ztry =     eval(document.form.number.value);


remplace par : 
 var ztry =     parseInt(document.getElementById('number').value);



0
iamtheone Messages postés 39 Date d'inscription lundi 10 avril 2017 Statut Membre Dernière intervention 8 mai 2017
19 avril 2017 à 13:32
Merci de ta réponse mais le code ne marche toujours pas.
Voici les erreurs :
Uncaught SyntaxError: unexcpected {
Line : 23
Uncaught ReferenceError: reset is not defined
Line : 10
(et quand je clic sur le bouton soumettre :)
Uncaught TypeError: submit is not a function
Line : 14
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650 > iamtheone Messages postés 39 Date d'inscription lundi 10 avril 2017 Statut Membre Dernière intervention 8 mai 2017
Modifié le 19 avril 2017 à 14:17
tu as donc des erreurs dans ton code ... des accolades mal fermées entre autre ....
Pour pouvoir t'aider il nous faudrait le code COMPLET de ta page..... (tel qu'écrit dans ton (tes ?) fichiers.
0
Réponse 3 / 3
iamtheone Messages postés 39 Date d'inscription lundi 10 avril 2017 Statut Membre Dernière intervention 8 mai 2017
19 avril 2017 à 14:14
C'est le code COMPLET de ma page. Je rappele que j'utilise sololearn.

--
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
19 avril 2017 à 14:20
oui... mais tu l'a placé dans deux balises de code différentes ....
Je voudrais voir le code html contenant la parti javascript ... TEL QUE TU L'AS ECRIT dans ton fichier html.
Et puis... avec les modifications que je t'ai donné .... car pour l'instant je n'ai que ton code d'origine ......
0
iamtheone Messages postés 39 Date d'inscription lundi 10 avril 2017 Statut Membre Dernière intervention 8 mai 2017 > jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024
19 avril 2017 à 14:41
ça ? 

<!DOCTYPE html>
<html>
    <head>
        <title>Guess the number</title>
        <script>
        
function reset() {

    x = Math.floor(Math.random() * (-101));
    document.getElementById("x").innerHTML =     "'+x+'";
    y = Math.floor(Math.random() * 101);
    document.getElementById("y").innerHTML = "'+y+'";
    z = Math.random() * (y - x) + x;
    trys = 0;
    document.getElementById("trys").innerHTML = "'+trys+'";

}

function submit() {

    var ztry = parseInt(document.getElementById('number').value);
    trys++;
    var so = document.getElementById("so");

    if (ztry > z) {
        so.innerHTML = "c'est moins";
    } elseif (ztry < z) {
        so.innerHTML = "c'est plus";
    } elseif (ztry == z) {
        so.innerHTML = "c'est gagné !!!";
    } else {
        so.innerHTML = "Merci d'entrer un nombre valide.";
        trys--;
    }

}

        </script>
    </head>
    <body onLoad="reset()">
    
        <h2>Guess the number HTML/CSS/JS</h2>
            <p><a href="">Cliquez ici</a> pour découvrir la manière la plus rapide de deviner un nombre compris entre x et y.</p>
        <hr />
            <input type="submit" value="Actualiser" onClick="reset()">
            <p>Vous devez deviner le nombre z compris entre <span id="x"></span> et <span id="y"></span>.</p>
            <p id="so" align="center" color="red"></p>
            <form name="form">
              <input type="number" id="number" value="0"> 
              <input type="button" name="submit" value="Soumettre" onClick="submit()"><br />
            </form>
        <p>Votre nombre d'essais : <span id="trys"></span></p><br /><br /><br /><br /><br /><br />
        
    </body>
</html>
0

Discussions similaires

Appel depuis le numéro 789
salah -
inwifan -

3 réponses
programme qui n'affiche pas le mot secret
EMy.chev -
yg_be -

3 réponses
Pourquoi Program files (x86) et Programmes?
peer_at -
abdelhak -

7 réponses
"BONJOUR" : utilité de ce programme???
sunbeep -
onizukaille -

5 réponses
TV LG affiche le carré non programmé
Chantal Joubert -
Evancarreaujoho -

4 réponses