Le juste prix - Javascript

Résolu/Fermé

lou1 - 21 janv. 2016 à 11:41
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 21 janv. 2016 à 16:22

Bonjour, j'aimerais savoir comment je pourrais compléter mon script ou si il y a des erreurs savoir ou est le problème.
J'aimerais aussi que pour chaque valeur saisie que la case ou on met la valeur s'efface .
Merci de votre aide .
Ps: Le code :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">
	function jeux (){
	    var nombre = document.commencer.solution.value;
		alert (nombre);
        var nb_coup =0 ;
        var nb = Math.floor(100*Math.random());
		alert (nb);
		choix();
    function choix(){
        while(nombre != nb)
		if(nombre < nb) { // c'est plus 
        alert ("c'est plus")
        nb_coup++;
        }
        if(nombre > nb) { // c'est moins
        document.getElementById("moin").src="moin.png";
		alert ("c'est moins")
        nb_coup ++;
        }
		}
    if(nombre == nb) { // La personne a gagné 
    alert("Bravo , le nombre était "+ nb +" Tu as gagné en "+ nb_coup +" coup(s)");
    var image_gagne = document.getElementById("gagne");
    image_gagne.src = "http://m.memegen.com/pdufvo.jpg";
      }
}
        
        </script>
	<title>Le Juste prix</title>
</head>
<body bgcolor="#CED8F6">
        <h1 style="text-align:center; text-decoration: underline "> Le Juste Prix </h1>
        <form name="commencer">
        <p style="text-align: center;"><input type="text" name="solution"/>
        <p style="text-align: center;"><input type="button" value="Jouer" onclick="jeux()"></p>
        </form>
        <p align="center"> <img id="gagne" src="" alt="" border=""> </p>
        <p align="center"> <img id="plus" src="" alt="" border=""> </p>
        <p align="center"> <img id="moin" src="" alt="" border=""> </p>


</body>
</html>

A voir également:

Juste prix javascript
Prix electricité - Accueil - Maison
Prix - Guide
Telecharger javascript - Télécharger - Langages
Prix licence windows 10 - Accueil - Installation
Gta 6 prix - Accueil - Jeu vidéo

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 525
21 janv. 2016 à 16:22

Salut,

Plusieurs remarques :
- Le problème d'utiliser est un formulaire est qu'en appuyant sur la touche entrée du clavier après avoir saisie un nombre, le formulaire est envoyé et la page est donc rechargé ce qui réinitialise le script (et donc défini à chaque une nouvelle solution). Puisqu'on utilise un événement onclick sur le bouton Jouer pour déclencher le traitement javascript, on peut se passer du formulaire.
Du coup pour cibler facilement l'input de saisie, j'ai ajouté un identifiant sur ce dernier et utilisé getElementById.
- Les variables nb et nb_coup ne doivent pas être initialisé dans la fonction jeux car à chaque fois qu'on clique sur le bouton Jouer, on remet la valeur de nb_coup à 0 et nb a une nouvelle valeur. Il faut donc initialiser ces variables en dehors de la fonction jeux.
- La boucle while est incorrecte et provoque une boucle infinie. Il faut seulement vérifier si le nombre saisie est correct, sinon on attend le prochain appel de la fonction jeux (c-a-d que l'utilisateur saisisse un nouveau nombre)
- La fonction choix n'est pas utile, on peux directement faire la comparaison dans la fonction jeux
- Enfin pour effacer le champ de saisie, il suffit de définir l'attribut value avec une chaine vide.

Soit une solution possible :

<!doctype html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<script type="text/javascript">
	var nb_coup = 0;
	var nb = Math.floor(100*Math.random());
	
	//alert(nb); // pour voir la solution
	
	function jeux (){
		var nombre = document.getElementById('solution').value;
		
		nb_coup++;
		
		if(nombre < nb) { // c'est plus 
			alert("c'est plus");
			document.getElementById('solution').value = '';
		}
		if(nombre > nb) { // c'est moins
			document.getElementById("moin").src="moin.png";
			alert("c'est moins");
			document.getElementById('solution').value = '';
		}
		if(nombre == nb) { // La personne a gagné 
			alert("Bravo , le nombre était "+ nb +" Tu as gagné en "+ nb_coup +" coup(s)");
			var image_gagne = document.getElementById("gagne");
			image_gagne.src = "http://m.memegen.com/pdufvo.jpg";
		}
	}
	</script>
	<title>Le Juste prix</title>
</head>
<body bgcolor="#CED8F6">
        <h1 style="text-align:center; text-decoration: underline ">Le Juste Prix </h1>
        
        <p style="text-align: center;"><input type="text" id="solution" name="solution"/>
        <p style="text-align: center;"><input type="button" value="Jouer" onclick="jeux()"></p>
        
        <p align="center"> <img id="gagne" src="" alt="" border=""> </p>
        <p align="center"> <img id="plus" src="" alt="" border=""> </p>
        <p align="center"> <img id="moin" src="" alt="" border=""> </p>
</body>
</html>

Bonne journée

Discussions similaires

Prix d'un appel locale = gratuit ?

Coût réparation retro-eclairage TV Led TCL

Javascript Arrondi à 2 chiffres après la virgule

Prix d'un appel local