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

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

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)

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)

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)

On remerciera Olivier pour ce cours particulier !

Merci 1000 fois olivier.
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

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)

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)

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)