Petite question rapide [Résolu]

Signaler
Messages postés
17
Date d'inscription
vendredi 16 janvier 2004
Statut
Membre
Dernière intervention
11 octobre 2014
-
Messages postés
17
Date d'inscription
vendredi 16 janvier 2004
Statut
Membre
Dernière intervention
11 octobre 2014
-
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

Messages postés
29602
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
26 septembre 2020
337
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).



Messages postés
17
Date d'inscription
vendredi 16 janvier 2004
Statut
Membre
Dernière intervention
11 octobre 2014

Nickel, merci pour ta réponse rapide, je vais me renseigner sur certains mécanismes en partant de tes commentaires.

Bon weekend ;-)