Le juste prix - Javascript [Résolu/Fermé]

Signaler
-
Messages postés
2370
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
-
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>

1 réponse

Messages postés
2370
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
10 mars 2020
431
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
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60511 internautes nous ont dit merci ce mois-ci