JAVASCRIPT
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>
Code 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;
}
Code complet
<!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>
Résultat
Calculatrice
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