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;
}

A voir également:

Petite question rapide
Tuto marche rapide - Conseils pratiques -Java
Pas assez rapide petit scarabée gif - Forum VB.NET
Petit souci avec "eval()" - Forum Flash
Plus rapide qu'un ListView - Forum Visual Basic
Css petite majuscule ✓ - Forum Javascript / DHTML

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 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).

Réponse 2 / 2

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 ;-)

Discussions similaires

gestion du temps de presence du personnel:rapatriement des données des pointeuse

Anagramme Récursif

Ecriture dans un fichier ascii plus de 32767 lignes

Exponentiation modulaire très rapide

Une toute petite feuille

Votre réponse

Discussions similaires