JavaScript で 2つの数字を追加する
この記事では、JavaScript ソースコードでの算術演算と、複数の数値の合計を取得する方法、およびデフォルトのアラートボックスとログボックスを使用して結果をユーザーに表示する方法を学習して使用します。
JavaScript で数字を追加する
（加算、減算、乗算、除算）のような算術演算の結果を見つけるために、JavaScript コードステートメントで演算子を使用します。開発者は主にこれらの演算子を使用して、プログラムで計算やさらに数学的な問題を実行します。
加算を見つけるために、プログラマーは数値で+ 演算子を使用します。
JavaScript の加算（+）演算子
JavaScript では、+ 演算子は数値の合計結果を取得します。文字列値で+ 演算子を使用すると、文字列間の連結が実行されます。
構文：
let value1 = 10
let value2 = 5
let sum = value1 + value2 // addition of values
console.log(sum);
加算演算を実行するには、複数の数値を割り当てるか、ユーザーが値を指定する必要があります。次の例では、ユーザー入力から 2つの値を取得して加算操作を実行し、その結果をユーザーに表示します。
サンプルコード：
<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>
出力：
上記の HTML ソースコードの form 要素を使用して、ユーザー入力フィールドと送信ボタンを作成しました。ユーザーは両方の値を挿入し、ユーザーが送信ボタンをクリックすると、関数 createSum() がトリガーされます。
スクリプトタグでは、createSum() 関数を宣言し、その関数内で、data1 および data2 変数のユーザー入力値を取得し、条件ステートメント if を使用して入力値をチェックしています。
値が空であるか、数値が含まれていない場合、エラーメッセージ alert() が表示されます。ユーザーが両方の数値を指定した場合、else 条件で、+ 演算子を使用して加算を実行し、結果を sum 変数に格納して、alert() ポップアップに表示しました。