.on (‘Entrée’) mises à jour et ajouts dynamics

J’ai un ensemble d’entrées de nombres HTML avec identifiants

YXS, YSM, YMED 

Je peux obtenir les valeurs de chaque entrée, les additionner et afficher le résultat dans #output.

CEPENDANT, il ne fonctionne que s’il est entré dans l’ordre YXS, YSM, YMED

Si j’enlève YSM, c’est blanc, je n’obtiens que YXS en tant que valeur en sortie de #output.

• valeur de stockage dans JSON au clic du bouton
• Comment choisir la deuxième structure de table sous un div?
• DataTables 1.10 – Ne pas afficher les résultats
• ne faisant pas défiler avec le
• jQuery CSS Selector pour filtrer la touche ENTER du clavier

J’essaie de le faire fonctionner. Ainsi, quelles que soient les valeurs entrées, elles sont soit additionnées et affichées, soit si une seule valeur est entrée, cette valeur est affichée sous #output quel que soit l’ordre des entrées.

Je me suis gratté la tête toute la journée, alors cherchez de l’aide si possible!

Voici mon code:

 $('#YXS').on("input", function() { var yxsInput = this.value; console.log(yxsInput); var Silver = (yxsInput / 100) * 90; var Gold = (yxsInput / 100) * 85; var Plat = (yxsInput / 100) * 80; var totalPrice = Number(yxsInput); $('#output').text(yxsInput); $("#output_Silver").html(Silver.toFixed(2)); $("#output_Gold").html(Gold.toFixed(2)); $("#output_Plat").html(Plat.toFixed(2)); $('#YSM').on("input", function() { var ysmInput = this.value; console.log(ysmInput); var totalPrice = Number(yxsInput)+Number(ysmInput); var Silver = (totalPrice / 100) * 90; var Gold = (totalPrice / 100) * 85; var Plat = (totalPrice / 100) * 80; $('#output').text(totalPrice); $("#output_Silver").html(Silver.toFixed(2)); $("#output_Gold").html(Gold.toFixed(2)); $("#output_Plat").html(Plat.toFixed(2)); $('#YMED').on("input", function() { var ymedInput = this.value; console.log(ymedInput); var totalPrice = Number(yxsInput)+Number(ysmInput)+Number(ymedInput); var Silver = (totalPrice / 100) * 90; var Gold = (totalPrice / 100) * 85; var Plat = (totalPrice / 100) * 80; $('#output').text(totalPrice); $("#output_Silver").html(Silver.toFixed(2)); $("#output_Gold").html(Gold.toFixed(2)); $("#output_Plat").html(Plat.toFixed(2)); }); }); 

J’ai d’abord essayé d’obtenir les entrées

 $('#YXS').on("input", function() { var yxsInput = this.value; console.log(yxsInput); $('#YSM').on("input", function() { var ysmInput = this.value; console.log(ysmInput); $('#YMED').on("input", function() { var ymedInput = this.value; console.log(ymedInput); 

Ce qui n’a pas fonctionné non plus et la console me dirait que yxsInput (par exemple) n’est pas défini.

Hope ive a bien expliqué mon objective final!

Merci beaucoup,

• Comment lire currentpage après index.php?
• Supprimer la première image dans le premier élément li avec jquery
• iframe ajuste automatiquement sa hauteur pour s’adapter à la hauteur du contenu
• Est-il possible d’obtenir une couleur a: hover via javascript sans survoler l’élément?
• Validation jQuery: validation des champs de la table en cliquant sur le bouton d’hyperlien et affichage du résumé du message d’erreur.

 $('#YXS, #YSM, #YMED').on("input", function() { var totalPrice = 0; $('#YXS, #YSM, #YMED').each(function(i, e) {totalPrice += ~~e.value}); var Silver = totalPrice * 0.9; var Gold = totalPrice * 0.85; var Plat = totalPrice * 0.8; $('#output').text(totalPrice); $("#output_Silver").html(Silver.toFixed(2)); $("#output_Gold").html(Gold.toFixed(2)); $("#output_Plat").html(Plat.toFixed(2)); }); 

 label, h3 {display:flex; justify-content:space-between; width:14rem; margin:1rem 0; padding:0} 

  YXS:  YSM:  YMED:  
Silver: 0.00
 
Gold: 0.00
 
Plat: 0.00
 
Total: 0