18008 sujets

Questions générales et questions de débutants

Création d'un formulaire de calcul

Bonjour,

Je souhaite créer une petite page html qui contiendra 3 cases.
La troisième sera le résultat du calcul d'après les valeurs rentré par l'utilisateur dans les deux premières cases.

D'habitude je cherche par moi-même mais je suis un peu perdu. Mais base en java sont très lointaine.

Qui pourrait m'aider ?
Cordialement
Jérôme
Modérateur
Salut

Jerome87 a écrit :
Je souhaite créer une petite page html qui contiendra 3 cases.
La troisième sera le résultat du calcul d'après les valeurs rentré par l'utilisateur dans les deux premières cases.

Cool comme petit exercice pour commencer

Jerome87 a écrit :
Mais base en java sont très lointaine.

*javacscript
(Attention le java c'est carrément autre chose)

Jerome87 a écrit :
Qui pourrait m'aider ?

Tout le monde ici. Dès que tu as un soucis tu viens faire un post avec ton code et ce que tu n'arrive pas a faire et nous voila Smiley smile
Merci de m'avoir répondu.
Effectivement ont me l'avait dit java et différent de javascript.
(a vouloir faire simple en écrivant le mot "java", j'ai oublié cette différence. J'aurais du écrire JS)

Voici mon bout de code

<html>
<body>
	<label>Case 1:</label>
	<input type="number" id="case1" value="5">
	<label>Case 2:</label>
	<input type="number" id="case2" value="5">
	<label>Résultat:</label>
	<input type="number" id="resultat">
<script>
var casenb1 = document.getElementById('case1').value;
var casenb2 = document.getElementById('case2').value;
function calculxp (casenb1,casenb2) {
	resultatxp = (casenb1*casenb2);
	alert (resultatxp);
}
calculxp(casenb1,casenb2);
</script>
</body>
</html>


Donc le but es que l'utilisateur écrive dans les 2 première cases les valeur qu'il souhaite. Et ensuite le résultat s'affiche dans la dernière.

Mais là, je nage. Je suis juste un tout petit bidouilleur en code.
Au final je souhaite que ce fichier html soit utilisable sur pc, tablette ou smartphone.

Edit : J'ai mis 'alert' juste pour tester.

Merci pour vos réponses.
Cordialement Jérôme
Modifié par Jerome87 (09 Jun 2023 - 00:52)
connecté
Bonjour,

Le problème quand on fait du développement web, c'est qu'il faut non seulement connaitre JavaScript, mais aussi l'API DOM qui va manipuler la représentation du HTML avec JavaScript. Il faut aussi maîtriser un peu de HTML et enfin il y aura le CSS...

Je vais vous présenter une première version d'un code, ce n'est pas ainsi que je coderais mais c'est à but didactique :
<!-- les labels doivent être liés à leur input, soit en les englobant, soit en ajoutant un attribut for de la même valeur que l'ID de l'imput -->
<label for="case1">Case 1:</label>
<input type="number" id="case1" value="5">
<label for="case2">Case 2:</label>
<input type="number" id="case2" value="5">
<label for="resultat">Résultat:</label>
<output type="number" id="resultat">25</output><!-- cet élément me semble plus approprié qu'un input -->
<script>
const casenb1 = document.getElementById('case1'); // en javascript on évite l'ancienne dénomination "var" au profit de const ou let (let permet une réafectation de la variable)
const casenb2 = document.getElementById('case2');
function calculxp(n1, n2) { // les variables pour la fonction peuvent être renomées pour une logique qui lui est propre et ainsi sortir du contexte général.
  result = n1.value * n2.value;
  console.log(result); // plutôt qu'un alert, prenez l'habitude de faire un console.log() et de regader le résultat dans la console, c'est plus convivial.
  return result;
}
document.documentElement.addEventListener('click', () => { // la sortie se met à jour uniquement si un clic est fait sur la page, on verra après pour une amélioration...
  document.getElementById('resultat').value = calculxp(casenb1, casenb2);
});
</script>

Voilà pour l'instant.
Modifié par Olivier C (09 Jun 2023 - 14:35)
connecté
Une fois ceci assimilé ont pourra réécrire la fonction de manière plus concise, par exemple avec une fonction fléchée comme ceci :
const calculxp = (n1, n2) => n1.value * n2.value;

Modifié par Olivier C (09 Jun 2023 - 09:23)
connecté
Pour l'instant notre fonction se déclenche avec un clic quelque part sur la page, il faudra ensuite trouver une approche plus précise avec la gestion des événements. Je spoil : on doit écouter les inputs avec l'écouteur d'événement "change" ou "input" (pour une version annotée : "onchange" ou "oninput"). Ici "input" c'est plus cool :
const casenb1 = document.getElementById('case1');
const casenb2 = document.getElementById('case2');

const calculxp = (n1, n2) => n1.value * n2.value;

casenb1.oninput = () => document.getElementById('resultat').value = calculxp(casenb1, casenb2);
casenb2.oninput = () => document.getElementById('resultat').value = calculxp(casenb1, casenb2);

On voit que le code se répète, pour éviter cela on pourra utiliser une boucle. Mais soufflons pour l'instant et voyons déjà si vous avez des remarques ou questions sur le code...
Modifié par Olivier C (09 Jun 2023 - 09:28)
Merci 1000 fois olivier. Smiley prie Smiley angel
Ton premier code es parfait pour moi.
Après je suis complètement largué, mais le 1er me va.
J'avait commencé a gratter un peu du coté addEventListener mais pfff pas simple.

Merci Beaucoup
connecté
Jerome87 a écrit :
Ton premier code es parfait pour moi.
Après je suis complètement largué, mais le 1er me va...

Et ben alors ? Et la fin de ma démonstration ? Ah non ah non : il faut penser au pauvre gus qui visitera le topic dans 5 ans et qui sera frustré de ne pas avoir la réponse finale ! Smiley bawling

Allez, juste pour le plaisir, voici la solution comme, moi, je la coderais :
const input1 = document.getElementById('case1');
const input2 = document.getElementById('case2');
const result = document.getElementById('resultat');

[input1, input2].map(x => x.oninput = () => result.value = input1.value * input2.value);

Donc, on passe tout dans une .map() et on calcule directement le résultat dans une fonction fléchée, sans appeler une fonction lointaine (pas la peine pour un calcul aussi simple et s'il n'est pas réutilisé par ailleurs).
Modifié par Olivier C (11 Jun 2023 - 20:52)
Meilleure solution
Bonjour,

Merci
Je ne pensait pas aller aussi loin. La première version me convenait d'un point de vue compréhension, mais là effectivement c'est plus simple.

Cordialement
Jérôme
Modifié par Jerome87 (11 Jun 2023 - 16:48)
Bonjour,

Je reviens sur ce code :

const casenb1 = document.getElementById('case1');
const casenb2 = document.getElementById('case2');

const calculxp = (n1, n2) => n1.value * n2.value;

casenb1.oninput = () => document.getElementById('resultat').value = calculxp(casenb1, casenb2);
casenb2.oninput = () => document.getElementById('resultat').value = calculxp(casenb1, casenb2);


Si je fait n1.value + n2.value, il me fait une concaténation.
(Exemple casenb1 = 5 et casenb2 = 5, il retourne 55 au lieu de 10)

J'ai trouvé une parade mais je me dit qu'il y a mieux.
const calculxp = (n1, n2) => Number(n1.value) + Number(n2.value);

Si par exemple dans un calcul je doit utiliser plusieurs fois n1 et n2, comment éviter de mettre a chaque fois Number ?
Peut être en appliquant Number directement a la source. possible ? ici =>
const casenb1 = Number(document.getElementById('case1').value);


Cordialement
Jérôme
Modifié par Jerome87 (28 Jun 2023 - 17:42)
connecté
Bien vu pour Number(). Je n'ai pas rencontré ce problème sur mes tests, mais il suffit qu'une valeur soit convertie quelque part en string pour que toute l'opération soit traitée comme une chaîne de caractère. C'est un inconvénient assez pénible avec le JS...

Edit : j'ai mal lu, effectivement il y a automatiquement conversion en string si opérateur "+", c'est assez dingue si on vient de langages bien foutus tel que Python. J'efface ma proposition précédemment écrite : il faut bien un Number() par valeur (sur la totalité de l'opération c'est inopérant).

De savoir la manière dont on le consomme, c'est une affaire de goût... et de stratégie :

- si la cible ne sert pas à autre chose que de récupérer une valeur, et surtout si cette valeur est réutilisée de nombreuses fois, alors effectivement il vaut mieux traiter la valeur dès l'origine de la création de la variable :
const n1 = Number(document.getElementById('case1').value)

- dans le cas contraire, par goût, mais aussi pour une certaine lisibilité - selon moi - je formaterais les données au niveau du calcul :
result.value = Number(n1.value) + Number(n2.value)

Avec cette dernière solution et en reprenant mon dernier code sur ce topic cela donnerait ceci :
const n1 = document.getElementById('case1')
const n2 = document.getElementById('case2')
const result = document.getElementById('resultat')

;[n1, n2].map(x => x.oninput = () => result.value = Number(n1.value) + Number(n2.value))


Test en ligne : CodePen
Modifié par Olivier C (28 Jun 2023 - 23:33)
Merci

Avec ceci, çà fonctionne pas.
const casenb1 = Number(document.getElementById('case1'));
const casenb2 = Number(document.getElementById('case2'));

const calculxp = (n1, n2) => n1.value + n2.value;

casenb1.oninput = () => document.getElementById('resultat').value = calculxp(casenb1, casenb2);
casenb2.oninput = () => document.getElementById('resultat').value = calculxp(casenb1, casenb2);
connecté
Je rappelle que ce code est bien moins optimisé que le dernier proposé... Ceci étant dit j'ai fait une erreur dans mon dernier post :
// J'avais défini Number() sur l'élément par lui-même :
const n1 = Number(document.getElementById('case1')) // => erreur

Je viens de la corriger :
// Number() ne peut formater que la VALEUR de l'élément :
const n1 = Number(document.getElementById('case1').value) // => ok

Modifié par Olivier C (28 Jun 2023 - 23:38)
Je comprend le principe de l'optimisation mais j'ai déjà du mal en version non optimisé, donc en optimisé c'es pire encore.

J'ai essayé çà mais idem :

const casenb1 = Number(document.getElementById('case1').value);
const casenb2 = Number(document.getElementById('case2').value);

const calculxp = (n1, n2) => n1 + n2;

casenb1.oninput = () => document.getElementById('resultat').value = calculxp(casenb1, casenb2);
casenb2.oninput = () => document.getElementById('resultat').value = calculxp(casenb1, casenb2);


<label for="case1">Case 1:</label>
<input type="number" id="case1" value="5">
<label for="case2">Case 2:</label>
<input type="number" id="case2" value="5">
<label for="resultat">Résultat:</label>
<output type="number" id="resultat">25</output>

Modifié par Jerome87 (29 Jun 2023 - 00:01)
connecté
Et oui, avec ce code ça ne marche toujours pas car vous définissez les variables uniquement avec les valeurs : du coup le gestionnaire d'événements qui, lui, est lié à l'élément par lui-même et non à la valeur, ne peux plus fonctionner...

Du coup, pour votre cas d'utilisation, il vaut mieux mettre Number() au niveau du calcul. Ça évitera de devoir définir quatre variables plutôt que deux.
Modifié par Olivier C (29 Jun 2023 - 05:59)
Prévenir un modérateur
Répondre au sujet
Aller à