Petite question rapide

Résolu
Byron Messages postés 17 Date d'inscription vendredi 16 janvier 2004 Statut Membre Dernière intervention 11 octobre 2014 - 11 oct. 2014 à 09:52
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;
}















2 réponses

jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 344
11 oct. 2014 à 14:45
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).



1
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
Nickel, merci pour ta réponse rapide, je vais me renseigner sur certains mécanismes en partant de tes commentaires.

Bon weekend ;-)
0
Rejoignez-nous