【JavaScript】簡単な計算してみる！足し算、引き算、掛け算、割り算【初級★】

JavaScriptを使用して足し算プログラムを作ってみたいと思います。

ブレインキャット

実行例も作っています！

実際動かしてみて、目標を目指してプログラミングしていきましょう！

四則演算について
目標
HTMLとJavaScriptに分解していく！
- HTML
- JavaScript

四則演算について

ブレインキャット

参考までに基本的な知識としてJavaScriptには以下のような演算子が使用できます。

都度調べれば良いので、特に覚えておく必要はないです。

記号	意味
+	足し算
-	引き算
*	掛け算
/	割り算
%	除算
**	べき乗

ブレインキャット

では実際に作っていこう！

目標

ブレインキャット

下の入力ボックスに数値を入れて[足算します]をクリックしてみてください！

+ = 結果

HTMLとJavaScriptに分解していく！

HTML

<input type="number" id="num1"> +
<input type="number" id="num2"> =
<span class="result">結果</span>
<br>
<button class="button" type="button" onclick="onClick();">足算します</button>

<input type="number" id="num1"> +

<input type="number" id="num2"> =

<br>

<button class="button" type="button" onclick="onClick();">足算します</button>

ブレインキャット

入力ボックスとボタンを設置しています。

JavaScript

<script>
 function onClick(){
        //1つ目の入力ボックスの値を取得する
        var value1 = document.getElementById("num1").value;
        //2つ目の入力ボックスの値を取得する
        var value2 = document.getElementById("num2").value;
        //足算する
        var result = parseInt(value1)  + parseInt(value2) ;
        //値を設定する
        document.querySelector('.result').innerHTML = result ;
    }
</script>