Calcule dans javascript et les formulaires [Résolu/Fermé]

Signaler
Messages postés
25
Date d'inscription
vendredi 8 avril 2016
Statut
Membre
Dernière intervention
20 janvier 2017
-
Messages postés
25
Date d'inscription
vendredi 8 avril 2016
Statut
Membre
Dernière intervention
20 janvier 2017
-
Bonjour à vous.
Aidez moi s'il vous plait. je voudrais avoir des lettres qui représente des nombres précis dans plusieurs balise select (exemple: select1: A = 50 et select2: B=20). Ensuite, lorsque je sélectionne A et ensuite B, que la valeur de ces deux (50 et 20) soit additionnée et lorsque je clique sur un bouton, que le résultat s'affiche dans un input box. tout ceci en HTML avec javascript et les formulaires. comment faire? Je notifie que je suis vraiment débutant en programmation. merci d'avance

6 réponses

Messages postés
29787
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 octobre 2020
2 863
Bonjour,
Et ?

Qu'as tu commencé à écrire comme code ?
As tu au moins commencé à faire le formulaire ?

Sachant que tu peux (dois...) utiliser les attributs "value" dans tes OPTIONS pour affecter une valeur à un text.

 <select id='monSelect1'>
 <option value='50'>A</option>
 <option value='70'>B</option>
 <option value='80'>C</option>
</select>


Ensuite, en Javascript, pour récupérer la valeur de l'élément selectionné, tu peux faire :
var valeur1 = document.getElementById('monSelect1').value;


Après.. ne te reste plus qu'à faire pareil pour toutes tes listes ... et à faire une simple mutliplication..

Messages postés
25
Date d'inscription
vendredi 8 avril 2016
Statut
Membre
Dernière intervention
20 janvier 2017

Merci Jordane pour ton aide. Je vais l'essayer et faire signe. Agréable journée
Messages postés
25
Date d'inscription
vendredi 8 avril 2016
Statut
Membre
Dernière intervention
20 janvier 2017

Jordan
Je n'ai pas pu avoir le résultat que j'attendais.
Aide moi à trouver le code qu’il faut au niveau du SCRIPT S’il te plait. Je te montre l’idée que j’ai au niveau du formulaire.
Je voudrais que lorsque je sélectionne une valeur ( A par exemple) ensuite une autre (BB) et enfin (C) , lorsque je vais cliquer sur le bouton calculer, que la somme additionnée des trois choix s’affiche dans le input box du formulaire.
Aide-moi stp. Merci d’avance

<SCRIPT LANGUAGE="javascript">
function AFFICHE(calculer){

}
</SCRIPT>
<form id="text" name="form">
<select id='monSelect1'>
<option value='50'>A</option>
<option value='40'>AA</option>
</select>
<select id='monSelect2'>
<option value='70'>B</option>
<option value='60'>BB</option>
</select>
<select id='monSelect3'>
<option value='80'>C</option>
<option value='70'>CC</option>
</select>
<input type="text" id="valeur1" value=""/>
<input type="button" value="Calculer" onclick="javascript:AFFICHE()">
</form>

Messages postés
29787
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 octobre 2020
2 863
1 - Merci d'utiliser les balises de code lorsque tu postes du code sur le forum. Merci de lire ceci : https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

2 - Le code à faire est :
<script type="text/javascript"> 
function calcul(){ 
 var valeur1 = document.getElementById('monSelect1').value;
 var valeur2 = document.getElementById('monSelect2').value;
 var valeur3 = document.getElementById('monSelect3').value;
 
 var resultat = parseInt(valeur1) + parseInt(valeur2) + parseInt(valeur3);
 
 var total = document.getElementById('total');
     total.value = resultat;
} 
</script> 

 <form id="text" name="form"> 
	 <select id='monSelect1'> 
		 <option value='50'>A</option> 
		 <option value='40'>AA</option> 
	 </select> 
	<select id='monSelect2'> 
		<option value='70'>B</option> 
		<option value='60'>BB</option> 
	</select> 
	<select id='monSelect3'> 
		<option value='80'>C</option> 
		<option value='70'>CC</option> 
	</select> 
	<input type="text" id="total" value=""/> 
	<input type="button" value="Calculer" onclick="calcul()"> 
</form> 

Messages postés
25
Date d'inscription
vendredi 8 avril 2016
Statut
Membre
Dernière intervention
20 janvier 2017

Bonsoir Jordane. Merci pour le code. Celà m'a permis de comprendre un peu comment çà fonctionne. Mais j'ai l'impression que quelque chose ne va pas à mon niveau. J'ai utilisé exactement le code mais je n'ai toujours aucun résultat dans le Input. Que faire s'il te plait?
Merci
Messages postés
29787
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 octobre 2020
2 863
Tu as copié collé le code tel quel ?
Montres nous ce que tu as exactement dans ta page .
N'aurais tu pas d'autres lignes de code (qui pourraient causer une erreur) ?
Si tu regardes avec les outils de debugage de ton navigateur (je te conseille d'utiliser le plugin FIREBUG pour Firefox) , dans la "console" ... tu as des choses d'indiquées ?
Messages postés
25
Date d'inscription
vendredi 8 avril 2016
Statut
Membre
Dernière intervention
20 janvier 2017

Bonjour Jordane.
Infiniment merci pour tout ce que tu fais aux demendeurs comme nous. Je faisais des conneries; lorsque j'ai copié et collé le code tel que tu me l'as envoyé, celà a mercher correctement comme je le voulais. Infiniment merci pour ton Aide et que Dieu te bénisse.
Je vais poster une autre question pour la suite de ce que je fais. Merci de m'aider encore.

Salut à tous,
un tuto débutant javascript ça aide, on est tous passé par là(pas forcément un tuto du web mais apprendre reste le meilleur moyen de savoir XD) .

Quelques remarques(j'allais m'y coller mais Jordane45 l'a fait):

On a dit déjà dit qu'on pouvait indiquer un élément(balise) HTML de la page pour pouvoir l'utiliser avec javascript(DOM), ici l'attribut ID='monselect1'.

dieu n'a rien à voir avec ça...j'espère en tout cas je suis adulte et pas besoin d'ami imaginaire ;)

Comme on le voit ici:
function AFFICHE(calculer){ 

}

En programmation(on connait un langage de programmation on les connaît tous à quelques subtilités près), ici javascript on peut indiquer une série d'instructions et l'appeler. Cela s'appelle une fonction.
Ici dans votre première idée la fonction AFFICHE existe mais est vide donc ne fait rien.

En informatique et à fortiori en programmation il faut faire attention à la respecter la casse des caractères(majuscules et minuscules).
Par convention ce sont des variables spécifiques qui s'écrivent en majuscules, les variables dites constantes qui contiennent des valeurs qui ne doivent pas être modifié par le programme. En clair il est dangereux et pas pratique d'écrire minuscules et majuscules, on oublie de mettre la minuscule ou la majuscule et c'est des heures à chercher parmi des centaines de lignes d'où vient l'erreur.

La norme en javascript est d'écrire tout en minuscule(nom de variable, nom de fonction), c'est commun à presque tout les langages.

Pour les fonctions la norme javascript(ECMASCRIPT) est lorsque l'on a 2 mots d'utiliser un majuscule pour les mots suivants le premier.
Ex:

function() calculAddition{/*les instructions ici*/}
ou bien 
function() calculAjoutNombres(){
/*...*/

}

C'est une norme uniquement donc pas indispensable mais juste pratique pour s'y retrouver et avoir un code clair que tout le monde puisse lire.
Bien sûr avec des noms de variables et de fonction le plus clair possible :)

Comparez:
var a=10;/*ici on sais pas à quoi correspond a il faut chercher dans le code*/
var nombrejours=10;/*Tout de suite plus évident, on sait de quoi il s'agit et ça aidera à trouver dans quel ligne du code la variable est utilisée*/


Bon venons en au choses intéressantes.

Donc nous avons établit qu'une fonction est un bout de programme que l'on peut utiliser dans notre programme. En javascript c'est un peu différent d'autres langages car les fonctions peuvent être utilisées comme des variables. Détail mais cela à parfois ses avantages
function()afficheBonjour{
console.log('Bonjour');
}
//est (presque)rigoureusement identique(la différence vient du ùmot clé var) à 
var afficheBonjour=function(){
console.log('Bonjour');
}

Détail mais cela servira plus tard si vous vous intéressez à javascript qui utilise une orientation objet. Pour faire simple l'objet c'est une structure de programmation qui n'est pas séquentielle. PAr programmation séquentielle on entends une suite d'instructions qui se lit du bout à la fin du programme.
Mais revenons à votre calculateur.

On voit bien que la programmation ici n'est pas séquentielle:
Il ne suffit pas d'afficher la page pour obtenir le calcul.

Ceci à fait la fortune(et l'intérêt) de javascript dans les temps anciens des débuts d'Internet.

En effet on parle de programmation événementielle, écouteur plus précisément(listener) ou même de modèle observateur/observé si on veux être plus pointilleux.

Ici l'écouteur c'est le bouton de validation du formulaire:

<input type="button" value="Calculer" onclick="calcul()">


Plus précisément l'écouteur du bouton 'guette' que l'utilisateur appuie sur le bouton (onclick) pour si c'est le cas 'déclencher' la fonction calcul() du code.

Pour l'exemple et la simplicité Jordane45 a écrit directement l'appel à la fonction(c'est le nom quand on utilise une fonction) dans la balise avec l'attribut onclick=...

Une autre façon de faire(recommandée mais plus compliqué à comprendre au début) est de le faire directement dans le code javascript avec une fonction prévue pour cela:
Cet(te fonction se nomme addEventListener (traduction: ajoute un écouteur d'événement)
notice ici:
http://www.w3schools.com/jsref/met_element_addeventlistener.asp

Pour repérer le bouton on va lui attribuer l'identifiant 'monBouton' comme ceci:
<input type="button" id="monBouton" value="Calculer" > 

<!--Il sera donc identique d'écrire:-->
<input type="button" id="monBouton" value="Calculer" onclick='calculer' > 

document.getElementById("myBtn").addEventListener("click", function(){
    calcul();
});


Cette méthode par rapport à l'utilisation de l'attribut onclick= directement dans le bouton à plusieurs avantages non négligeables. L'un d'eux est de bien séparer le javascript du HTML, ainsi on peut changer aisément l'un sans avoir à modifier l'autre et vice et versa.
Mais pour un début vous pouvez continuer avec les listeners/écouteurs directement dans le HTML en sachant qu'il faudra passer à l'autre méthode tôt ou tard qui a de nombreux avantages, ou plutôt n'a pas les inconvénients de l'autre et sera une façon de faire beaucoup plus claire surtout si vous avez plusieurs boutons ou plusieurs fonctions à appeler lors d'un événement.

Voilà vous en savez déjà plus sur la programmation événementielle, mais que ça vous disepnse pas de passer par les bases et d'approfondir le DOM, les API HTML5 et bien d'autres choses qui font de javascript partie intégrante des sites web et s'est largement amélioré ces 15 dernières années(au point de devenir incontournable et d'offrir une quasi infinité de solutions; ex: les frameworks comme JQuery, la manipulation du CANVAS HTML qui permet de dessiner ou faire des animations facilement....).
Messages postés
25
Date d'inscription
vendredi 8 avril 2016
Statut
Membre
Dernière intervention
20 janvier 2017

Bonjour rankere
Merci pour l'info. Mais en réalité, je ne sais vraiment pas à quoi celà a répondu par rapport à mes questions.
Merci