Ajouter deux nombres en JavaScript
Dans cet article, nous allons apprendre et utiliser les opérations arithmétiques dans le code source JavaScript et comment obtenir la somme de plusieurs valeurs numériques et utiliser la boîte d’alerte et la boîte de journal par défaut pour afficher le résultat à l’utilisateur.
Ajouter des nombres en JavaScript
Pour connaître les résultats des opérations arithmétiques telles que (addition, soustraction, multiplication et division), nous utilisons des opérateurs dans les instructions de code JavaScript. Les développeurs utilisent principalement ces opérateurs pour effectuer des calculs et d’autres problèmes mathématiques dans leurs programmes.
Pour trouver l’addition, les programmeurs utilisent l’opérateur + avec des valeurs numériques.
Ajout (+) Opérateur en JavaScript
En JavaScript, l’opérateur + obtient le résultat de la somme des valeurs numériques. Si nous utilisons l’opérateur + dans les valeurs de chaîne, il effectuera une concaténation entre les chaînes.
Syntaxe:
let value1 = 10
let value2 = 5
let sum = value1 + value2 // addition of values
console.log(sum);
Nous avons besoin de plusieurs valeurs numériques attribuées ou de valeurs fournies par l’utilisateur pour effectuer l’opération d’addition. Dans l’exemple ci-dessous, nous obtiendrons deux valeurs à partir de l’entrée de l’utilisateur et effectuerons une opération d’addition, puis afficherons le résultat à l’utilisateur.
Exemple de code :
<html>
<head>
<title> display JavaScript alert </title>
</head>
<script>
function createSum()
{
let data1 = document.getElementById("value1").value;
data1 = parseInt(data1)
let data2 = document.getElementById("value2").value;
data2 = parseInt(data2)
if(isNaN(data1) || isNaN(data2)) //check empty data field
{
alert("Please enter both values");
}else{
let sum = data1+data2;
alert("Your'e sum value is : "+sum);
}
}
</script>
<body>
<h1 style="color:blueviolet">DelftStack Learning</h1>
<h3>JavaScript Add two values</h3>
<form onsubmit ="return createSum()">
<!-- data input -->
<td> Enter 1st Value: </td>
<input id = "value1" type="number">
<td> Enter 2nd Value: </td>
<input id = "value2" type="number">
<br><br>
<input type = "submit" value = "Sum values">
</form>
</body>
</html>
Production:
Nous avons utilisé l’élément de formulaire dans le code source HTML ci-dessus pour créer des champs de saisie utilisateur et un bouton d’envoi. L’utilisateur insérera les deux valeurs, et lorsque l’utilisateur cliquera sur le bouton Soumettre, la fonction createSum() se déclenchera.
Dans les balises de script, nous avons déclaré la fonction createSum(), et à l’intérieur de cette fonction, nous obtenons les valeurs d’entrée de l’utilisateur dans les variables data1 et data2 et avons utilisé l’instruction conditionnelle if pour vérifier les valeurs d’entrée.
Si les valeurs sont vides ou ne contiennent pas de nombre, il affichera un message d’erreur alert(). Si l’utilisateur fournit les deux valeurs numériques, alors, dans la condition else, nous avons effectué l’addition à l’aide de l’opérateur +, stocké le résultat dans la variable sum et l’avons affiché dans la fenêtre contextuelle alert().