Bienvenue dans cette partie où nous allons apprendre à créer une calculatrice en Javascript
La fonction calculer()
est déclenchée lorsque le bouton "Calculer" est cliqué.
Elle récupère les valeurs des nombres et de l'opération sélectionnées par l'utilisateur à l'aide des getElementById
.
Ensuite, elle vérifie si les nombres sont valides, effectue l'opération correspondante en utilisant un switch
,
et affiche le résultat obtenu dans la balise avec l'id "resultat".
Si une erreur est détectée, un message d'erreur approprié est affiché.
Code HTML
<!DOCTYPE html>
<html>
<head>
<title>Calculatrice/RudLess</title>
</head>
<body>
<h1>Calculatrice</h1>
<label for="nombre1">Nombre 1 :</label>
<input type="text" id="nombre1"><br>
<label for="nombre2">Nombre 2 :</label>
<input type="text" id="nombre2"><br>
<label for="operation">Opération :</label>
<select id="operation">
<option value="addition">Addition</option>
<option value="soustraction">Soustraction</option>
<option value="multiplication">Multiplication</option>
<option value="division">Division</option>
</select><br>
<button onclick="calculer()">Calculer</button><br>
<p id="resultat"></p>
</body>
</html>
Javascript
function calculer() {
var nombre1 = parseFloat(document.getElementById("nombre1").value);
var nombre2 = parseFloat(document.getElementById("nombre2").value);
var operation = document.getElementById("operation").value;
var resultat = 0;
if (isNaN(nombre1) || isNaN(nombre2)) {
document.getElementById("resultat").innerHTML = "Veuillez entrer des nombres valides.";
return;
}
switch (operation) {
case "addition":
resultat = nombre1 + nombre2;
break;
case "soustraction":
resultat = nombre1 - nombre2;
break;
case "multiplication":
resultat = nombre1 * nombre2;
break;
case "division":
if (nombre2 === 0) {
document.getElementById("resultat").innerHTML = "Division par zéro impossible.";
return;
}
resultat = nombre1 / nombre2;
break;
default:
document.getElementById("resultat").innerHTML = "Opération invalide.";
return;
}
document.getElementById("resultat").innerHTML = "Le résultat est : " + resultat;
}
<!DOCTYPE html>
<html>
<head>
<title>Calculatrice/RudLess</title>
<script type="text/javascript">
function calculer() {
var nombre1 = parseFloat(document.getElementById("nombre1").value);
var nombre2 = parseFloat(document.getElementById("nombre2").value);
var operation = document.getElementById("operation").value;
var resultat = 0;
if (isNaN(nombre1) || isNaN(nombre2)) {
document.getElementById("resultat").innerHTML = "Veuillez entrer des nombres valides.";
return;
}
switch (operation) {
case "addition":
resultat = nombre1 + nombre2;
break;
case "soustraction":
resultat = nombre1 - nombre2;
break;
case "multiplication":
resultat = nombre1 * nombre2;
break;
case "division":
if (nombre2 === 0) {
document.getElementById("resultat").innerHTML = "Division par zéro impossible.";
return;
}
resultat = nombre1 / nombre2;
break;
default:
document.getElementById("resultat").innerHTML = "Opération invalide.";
return;
}
document.getElementById("resultat").innerHTML = "Le résultat est : " + resultat;
}
</script>
</head>
<body>
<h1>Calculatrice</h1>
<label for="nombre1">Nombre 1 :</label>
<input type="text" id="nombre1"><br>
<label for="nombre2">Nombre 2 :</label>
<input type="text" id="nombre2"><br>
<label for="operation">Opération :</label>
<select id="operation">
<option value="addition">Addition</option>
<option value="soustraction">Soustraction</option>
<option value="multiplication">Multiplication</option>
<option value="division">Division</option>
</select><br>
<button onclick="calculer()">Calculer</button><br>
<p id="resultat"></p>
</body>
</html>
Voilà notre fonction est correcte. pour le design, je vous laisse l'amélioer vous-même. si vous avez des questions, exprimez-vous dans la salle de débat ou dans le Forum.
Vous pouvez télécharger le code source du tuto ici Télécharger