Petite question rapide [Résolu]

Messages postés
17
Date d'inscription
vendredi 16 janvier 2004
Statut
Membre
Dernière intervention
11 octobre 2014
- - Dernière réponse : Byron
Messages postés
17
Date d'inscription
vendredi 16 janvier 2004
Statut
Membre
Dernière intervention
11 octobre 2014
- 11 oct. 2014 à 16:21
Bonjour,

Voilà je tente de réaliser une calculatrice des plus basique ( 4 opérations ).
J'arrive à récupérer les valeurs de mes opérandes 1 et 2 ( via un alert, il me donne la valeur ), cependant quand je veux récupérer la valeur de mon opérateur, j'ai le message 'undefined'.
J'aimerais également pouvoir afficher le résultat dans le champs résultat.

Pourriez-vous éclairer ma lanterne ?

Voici mon code XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr" >
<head>
<title>Second Javascript</title>
<meta http-equiv="Content-Type" content="text/html" />
<script type="text/javascript" src="second.js"></script>

</head>
<body>
<!-- <form method="post" action="" onsubmit="form2()"> -->
<form name="calculatrice" method="post" action="">
<p>
Operande 1 <input type="text" name="op1" id="op1" /> <br />
Operande 2 <input type="text" name="op2" id="op2" /> <br />
</p>

<p>
<input type="radio" name="operateur" value="plus" id="plus"/> <label for="plus">+</label><br />
<input type="radio" name="operateur" value="moins" id="moins"/> <label for="moins">-</label><br />
<input type="radio" name="operateur" value="divise" id="divise"/> <label for="divise">/</label><br />
<input type="radio" name="operateur" value="fois" id="fois"/> <label for="fois">*</label><br />
</p>

<input type="button" value="Get" onclick="form2();"/>
<!--<input type="image" alt="Submit" src="../images/Submit.gif" tabindex="190" />-->

Resultat <input type="text" name="resultat" id="resultat" /> <br />

</form>
</body>
</html>



Et voici mon code javascript


function form2 ()
{
var op1 = document.getElementById('op1').value;
var op2 = document.getElementById('op2').value;
var operateur = document.getElementsByName('operateur').value;
var resultat;

switch (operateur)
{
case 'plus' : resultat = op1 + op2; break;
case 'moins' : resultat = op1 - op2; break;
case 'fois' : resultat = op1 * op2; break;
case 'divise' : resultat = op1 / op2; break;
}

alert(operateur);
alert(resultat);
document.getElementById("resultat").innerHTML=resultat;
}















Afficher la suite 

2 réponses

Meilleure réponse
Messages postés
27058
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2019
318
1
Merci
Bonjour,

voici le code complet corrigé :

<html>
<head> <title> Calculette </title>
</head>
<body>
<script type="text/javascript">

function getValueRadioByName(radioName){
	var radios = document.getElementsByName(radioName);
	for(var i = 0; i < radios.length; i++){
		if(radios[i].checked){
			return  radios[i].value;
		}
	}
}


function form2(){
	var op1 = parseInt( document.getElementById('op1').value);
	var op2 = parseInt( document.getElementById('op2').value);
	var operateur = getValueRadioByName('operateur');
	var resultat;
	
	switch (operateur){
		case 'plus' : resultat = op1 + op2; 	break;
		case 'moins' : resultat = op1 - op2; 	break;
		case 'fois' : resultat = op1 * op2; 	break;
		case 'divise' : resultat = op1 / op2;	break;
	}
	
	alert(operateur);
	alert(resultat);
	document.getElementById("resultat").value=resultat;
}

</script>
	<p>
	Operande 1 <input type="text" name="op1" id="op1" /> <br />
	Operande 2 <input type="text" name="op2" id="op2" /> <br />
	</p>
	
	<p>
	<input type="radio" name="operateur" value="plus" id="plus"/> 		<label for="plus">+</label><br />
	<input type="radio" name="operateur" value="moins" id="moins"/> 	<label for="moins">-</label><br />
	<input type="radio" name="operateur" value="divise" id="divise"/> 	<label for="divise">/</label><br />
	<input type="radio" name="operateur" value="fois" id="fois"/>		<label for="fois">*</label><br />
	</p>
	
	<input type="button" value="Get" onclick="form2();"/>
	Resultat <input type="text" name="resultat" id="resultat" /> <br />


</body>

</html>


- Suppression des balises FORM (aucune utilité pour ton besoin actuel)
- Ajout d'une fonction permettant de récupérer la valeur du bouton radio coché
- Ajout des ParsInt pour indiquer que les variables sont des nombres et non du texte
- Retrait de innerHTML pour l'affichage du résultat.. (en effet.. pour mettre une valeur dans un INPUT.. c'est avec VALUE qu'il faut le faire).



Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 190 internautes nous ont dit merci ce mois-ci

Commenter la réponse de jordane45
Messages postés
17
Date d'inscription
vendredi 16 janvier 2004
Statut
Membre
Dernière intervention
11 octobre 2014
0
Merci
Nickel, merci pour ta réponse rapide, je vais me renseigner sur certains mécanismes en partant de tes commentaires.

Bon weekend ;-)
Commenter la réponse de Byron