11521 sujets

JavaScript, DOM et API Web HTML5

Mon code JavaScript ne fonctionne pas

Bonjour à vous tous,

Je dois réaliser un devoir après avoir abordé l'initiation du Javascript mais je rencontre des difficultés. Cela ne fonctionne pas et je ne parviens pas à savoir pourquoi.

Pour commencer, voici l'intitulé du devoir : il faut créer un fichier HTML comportant un champ de saisie de texte et un bouton de validation faisant appel à une fonction JavaScript. Ensuite, il faut créer un fichier JavaScript externe, lié au fichier HTML, qui génère un nombre entier entre 1 et 100, puis une alerte si l'utilisateur ne saisit pas un nombre (exemple, "Vous devez indiquer un nombre"), une autre alerte si le nombre saisi est inférieur à au nombre généré (exemple "Le nombre indiqué est trop petit"), puis une autre alerte si le nombre indiqué est trop grand (exemple "Le nombre est trop grand") et enfin une alerte si le nombre saisi est égal au nombre généré (exemple "Vous avez gagné !").

Voici le code HTML :

<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>Nombre entier</title>
	<script type="text/javascript" src="nombre_entier.js"></script>
	<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap" rel="stylesheet">
	<style>
		*{margin: 0; padding: 0; box-sizing: border-box;}
		html{font-size: 100%;}
		html,body {height: 100%;}
		body{font-family: 'Source Sans Pro', sans-serif; font-size: 0.8em;}
		input{display: block; padding: 10px; font-size: 1.5em; width: 500px; text-align: center; margin-top: 10px;}
		form{margin: 0 auto;}
		.boite {height: 100%; display: flex; align-items: center;}
		fieldset{padding: 20px;}
		legend{font-size: 2em; padding: 0 10px 5px 10px; background-color: black; color: white;}
		.hasard{font-weight: 900; width: 150px; margin: 0 auto; border: 0; background-color: #cdcdcd;}
	</style>
</head>
</head>
<body>
	<div class="boite">
		<form method="post" name="formulaire" onsubmit="return validerFormulaire()">
			<fieldset>
				<legend>Jouons un peu</legend>
				<input type="texte" class="hasard" name="hasard2">
				<input type="texte" name="nom" placeholder="Saisissez un nombre entier compris entre 1 et 100">
				<input type="submit" value="Valider">
			</fieldset>
		</form>
	</div>
</body>
</html>

Voici le code JavaScript :

var nombre_minimum=1; 
var nombre_maximum=100;  
var random = Math.floor(Math.random() * (nombre_maximum - nombre_minimum)) + nombre_minimum; 
document.write(random);

var nombre_entier = random;
switch(nombre_entier){
	case 'A':
		alert('Vous devez indiquer un nombre');
		break;
	case 'B':
		alert('Le nombre indiqué est trop petit');
		break;
	case 'C':
		alert('Le nombre indiqué est trop grand');
		break;
	default:
		alert('Vous avez gagné !');
}

// function validerFormulaire(){
	// var nom = document.forms["formulaire"]["nom"]value;
	// if(nom == null || nom == ""){
		// alert("Un nombre doit être spécifié");
		// return false;
	// }
// }

Et voici le résultat obtenu :
upload/1657946022-62242-capturedancran2022-07-1606232.png
De plus, je ne sais pas comment faire, je voudrais que le nombre généré, qui apparaît tout en haut à gauche en tout petit, apparaisse dans le premier champ gris dans le cartouche "Jouons un peu". Je ne sais pas du tout comment récupérer cette valeur pour l'injecter dans ce champ.

Pouvez-vous m'aider ?
Modifié par ObiJuanKenobi (16 Jul 2022 - 06:38)
Si tu inclus le chargement du script dans le <head> il ne doit pas contenir de commande qui modifie le contenu de la page.
Tu as écrit :
document.write(random);
dans le code de ton fichier JavaScript

Pour en revenir à une discussion récente :
- document est un objet qui représente la page
- document.write() est une méthode de cet objet qui écrit du texte dans la page à l'endroit où le script est appelé.

Si tu utilises les outils de développement, tu verras que le code HTML de ta page est devenu :

<!doctype html>
<html lang="fr">
    <head>
	<meta charset="utf-8">
	<title>Nombre entier</title>
	<script type="text/javascript" src="nombre_entier.js"></script>
    </head>
    <body>64
	<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&amp;display=swap" rel="stylesheet">
	<style>........../style>
	<div class="boite">.......</div>
    </body>
</html>


En fait le code qui a été reçu par le navigateur c'était 

<!doctype html>
<html lang="fr"><head>
	<meta charset="utf-8">
	<title>Nombre entier</title>
	<script type="text/javascript" src="nombre_entier.js"></script>
    64
	<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&amp;display=swap" rel="stylesheet">
	<style>
		..........
	</style>
    </head>
     <body>
        ....

Ce nombre dans le code HTML n'a rien à voir avec le contenu d'une balise <head>
Pour tenter de corriger ce code HTML défectueux, le navigateur a fermé la balise <head> et ouvert la balise <body> pour inclure le nombre dans <body>.
Cela explique le problème du nombre aléatoire écrit en petits caractères en haut de la page.
Modifié par PapyJP (16 Jul 2022 - 11:33)
Si tu veux écrire le nombre aléatoire dans la balise 
<input type="texte" class="hasard" name="hasard2">
il faut d'abord pouvoir retrouver l'objet représentant cette balise dans l'objet document.
Tu peux considérer que c'est le premier élément dont le tag est <input> et utiliser la méthode document.getElementsByTagName()
[code=javascript
var hasard2 = document.getElementsByTagName('input")[0];
[/code]
document.getElementsByTagName('input") va rendre la liste des objets HTMLElement qui ont la balise <input>. Le premier élément de cette liste a l'indice 0
Une fois que tu as retrouvé l'objet tu peux modifier sa propriété value.
Soit:

function setRandom() {
    var nombre_minimum=1; 
    var nombre_maximum=100;  
    var random = Math.floor(Math.random() * (nombre_maximum - nombre_minimum)) + nombre_minimum; 
    var hasard2 = document.getElementsByTagName('input')[0];
   hasard2.value = random;
} 
/* supprimer ou mettre en commentaire le reste du fichier nombre_entier.js */

Et dans la page HTML ajouter juste avant </body> l'appel à cette fonction :

<!doctype html>
<html lang="fr">
<head>...</head>
<body>
    <div class="boite">....</div>
    <script>setRandom()</script>
</body>

Modifié par PapyJP (16 Jul 2022 - 12:50)
Autre remarque :
Les informations textuelles dans une balise <form> ne doivent pas être mises dans des balises <input> si leur contenu n'a pas à être modifié par l'utillisateur:

<form method="post" name="formulaire" onsubmit="return validerFormulaire()">
  <fieldset>
    <legend>Jouons un peu</legend>
      <input type="texte" class="hasard" name="hasard2">
      <p>Saisissez un nombre entier compris entre 1 et 100</p>
      <input type="submit" value="Valider">
    </fieldset>
</form>

Modifié par PapyJP (16 Jul 2022 - 12:47)
Avec ces modifications dans le HTML voici le code du fichier JavaScript :

/* déclaration de variables globales */
var nombre_minimum=1;
var nombre_maximum=100;

/* initialiser la zone de saisie avec un entier aléatoire */
function setRandom() {
    var random = Math.floor(Math.random() * (nombre_maximum - nombre_minimum)) + nombre_minimum;
    var hasard2 = document.getElementsByTagName('input')[0];
    hasard2.value = random;
}
/* validation du formulaire */
function validerFormulaire() {
	var message = 'Vous avez gagné !'; /* par défaut */
	var hasard2 = document.getElementsByTagName('input')[0];
	var nombre = hasard2.value;
	if(isNaN(nombre) || nombre.replace(/\s+/, '') == '') message = 'Vous devez indiquer un nombre';
	else if(nombre < nombre_minimum) message = 'Le nombre indiqué est trop petit';
	else if(nombre > nombre_maximum) message = 'Le nombre indiqué est trop grand';
	alert(message);
}

isNaN teste si une valeur n'est pas un nombre
Mais une chaîne de caractère vide ou ne contenant que des ' ' est considérée comme le nombre 0.
nombre.replace(/\s*/, '') remplace tous les espaces, tabulation, changements de ligne consécutifs par une chaîne vide

Et voici la page HTML modifiée

<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>Nombre entier</title>
	<script type="text/javascript" src="nombre_entier.js"></script>
	<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap" rel="stylesheet">
	<style>
		*{margin: 0; padding: 0; box-sizing: border-box;}
		html{font-size: 100%;}
		html,body {height: 100%;}
		body{font-family: 'Source Sans Pro', sans-serif; font-size: 0.8em;}
		input{display: block; padding: 10px; font-size: 1.5em; width: 500px; text-align: center; margin-top: 10px;}
		form{margin: 0 auto;}
		.boite {height: 100%; display: flex; align-items: center;}
		fieldset{padding: 20px;}
		legend{font-size: 2em; padding: 0 10px 5px 10px; background-color: black; color: white;}
		.hasard{font-weight: 900; width: 150px; margin: 0 auto; border: 0; background-color: #cdcdcd;}
	</style>
</head>
</head>
<body>
	<div class="boite">
		<form method="post" name="formulaire" onsubmit="return validerFormulaire()">
			<fieldset>
				<legend>Jouons un peu</legend>
				<input type="texte" class="hasard" name="hasard2">
				<p>Saisissez un nombre entier compris entre 1 et 100</p>
				<input type="submit" value="Valider">
			</fieldset>
		</form>
		<script>setRandom()</script>
	</div>
</body>
</html>

Modifié par PapyJP (16 Jul 2022 - 12:48)
Remarque :
onsubmit="return validerFormulaire()"
la fonction validerFormulaire telle que je l'ai écrite ne retourne pas true ou false
On devrait la modifier en

function validerFormulaire() {
	var message = ''; 
	var hasard2 = document.getElementsByTagName('input')[0];
	var nombre = hasard2.value;
	if(isNaN(nombre) || nombre.replace(/\s+/, '') == '') message = 'Vous devez indiquer un nombre';
	else if(nombre < nombre_minimum) message = 'Le nombre indiqué est trop petit';
	else if(nombre > nombre_maximum) message = 'Le nombre indiqué est trop grand';
	var test = message == '';
	if(test) message = 'Vous avez gagné';
	alert(message);
	return test;
}

ce qui donne pour le fichier JavaScript

/* déclaration de variables globales */
var nombre_minimum=1;
var nombre_maximum=100;

/* initialiser la zone de saisie avec un entier aléatoire */
function setRandom() {
    var random = Math.floor(Math.random() * (nombre_maximum - nombre_minimum)) + nombre_minimum;
    var hasard2 = document.getElementsByTagName('input')[0];
    hasard2.value = random;
}

/* validation du formulaire */
function validerFormulaire() {
	var message = ''; 
	var hasard2 = document.getElementsByTagName('input')[0];
	var nombre = hasard2.value;
	if(isNaN(nombre) || nombre.replace(/\s+/, '') == '') message = 'Vous devez indiquer un nombre';
	else if(nombre < nombre_minimum) message = 'Le nombre indiqué est trop petit';
	else if(nombre > nombre_maximum) message = 'Le nombre indiqué est trop grand';
	var test = message == '';
	if(test) message = 'Vous avez gagné';
	alert(message);
	return test;
}

Modifié par PapyJP (16 Jul 2022 - 12:46)
Autre remarque
Si au niveau où vous en êtes du cours l'utilisation de 
var hasard2 = document.getElementsByTagName('input')[0];

est prématurée, tu peux conserver ce que tu avais écrit :
document.forms["formulaire"]["nom"]


Cette forme permet de masquer à la personne qui écrit le code la façon dont l'objet document est constitué.

Depuis très longtemps, les navigateurs créent une propriété document.forms qui est la même chose que document.getElementsByTagName('form') sous forme d'un tableau indexé par le nom du formulaire.
Ce n'est que par la suite que la formulation du DOM a été établie.
Merci Papy pour tes explications.

Cependant, il y a encore beaucoup de choses que je ne comprends pas. Par exemple, je ne comprends pas la méthode document.getElementsByTagName() parce que je ne l'ai pas vue étant donné que c'est juste une initiation pour le moment. En même temps, c'est moi qui voulais que le nombre aléatoire apparaisse dans le champ, le devoir ne me demande pas de faire ça.

Ensuite, tu fais des propositions de code que je n'ai pas abordé pour l'instant. J'ai décidé d'envoyer à la correction ce que j'ai fait (différent de ce que j'ai copié/collé au début de ce post), en précisant que je n'ai pas réussi à faire fonctionner mon code JavaScript. Ce n'est pas grave pour moi, j'aurai certainement une mauvaise note mais plus tard je reviendrai dessus et peut être que je comprendrai.
Salut
meme si tu as déjà rendu la chose, quelques explication complémentaire sur ton code : 

switch(nombre_entier){
	case 'A':
		alert('Vous devez indiquer un nombre');
		break;
	case 'B':
		alert('Le nombre indiqué est trop petit');
		break;
	case 'C':
		alert('Le nombre indiqué est trop grand');
		break;
	default:
		alert('Vous avez gagné !');
}


Ton switch est curieux, car tu fais un switch(nombre_entier) donc tu demande à switch de tester un "nombre", mais dans tes cases (dans tes "condition") tu test une lettre 'A' ou 'B' ou 'C'....

Bah.... tu souhaites pourtant tester un nombre entre 1 et 100, pas des lettres.
Si on prend le case 'B' il faudrait plutot avoir 
case nombre_entier < 1
J'ai écrit l'appel à la méthode https://developer.mozilla.org parce que (sans chanter le HTML) c'est ce qui m'est venu naturellement à l'esprit
Comme je lai dit après, tu aurais pu faire autrement 

/* déclaration de variables globales */
var nombre_minimum=1;
var nombre_maximum=100;

/* initialiser la zone de saisie avec un entier aléatoire */
function setRandom() {
    var random = Math.floor(Math.random() * (nombre_maximum - nombre_minimum)) + nombre_minimum;
    document.forms["formulaire"]["nom"].value= random;
}

/* validation du formulaire */
function validerFormulaire() {
	var message = ''; 
	 document.forms["formulaire"]["nom"].value= random
	if(isNaN(nombre) || nombre.replace(/\s+/, '') == '') message = 'Vous devez indiquer un nombre';
	else if(nombre < nombre_minimum) message = 'Le nombre indiqué est trop petit';
	else if(nombre > nombre_maximum) message = 'Le nombre indiqué est trop grand';
	var test = message == '';
	if(test) message = 'Vous avez gagné';
	alert(message);
	return test;
}

Le but de cet exercice n'est pas (ou pas seulement) d'obtenir une note, mais d'apprendre quelque chose.
Quand tu ne comprends pas, le site à consulter est https://developer.mozilla.org ... ou de poser la question sur ce forum; il y a généralement quelqu'un qui te répondra.
Si tu ne comprends pas la réponse précise ce que tu as ou non compris, ça nous aide à orienter nos réponses pour que tu comprennes.

J'avoue que ce que moi je n'ai pas compris c'est comment tu as pu suivre un cours sur PHP sans qu'on t'explique les concepts d'objet, méthodes et propriétés. Je pensais que c'était acquis.
Sujet clos
Aller à