#計算機を作るpart2

##きっかけ
前回の記事で作った足し算のみの計算機に引き算機能も付けたいと思ったため。

##ざっくりとした構想
前回の足し算と同じようなプログラムで、引き算機能を作る
足し算・引き算を切り替えられるボタンを配置
（このボタンを作るのにかなり試行錯誤してしまった）
それぞれがactive中のみそれぞれの計算が行える機能（未実装）

##完成物(スクリーンショット)
足し算ボタンがactive

引き算ボタンがactive

##サンプルコード

caluculate.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jsを使って四則計算機</title>
  <link rel="stylesheet" href="css/caluculate.css">
</head>
<body>
  <ul id="lists"></ul>
  <div id="caluculate_btns">
    <button class="btn active">足し算</button>
    <button class="btn">引き算</button>
  </div>

  <div id="addtion_box">
    <input id="number1" type="text">
    <span>+</span>
    <input id="number2" type="text">
    <input id="addtion" type="button" value="計算">
  </div>
  
  <div id="subtraction_box">
    <input id="number3" type="text">
    <span>-</span>
    <input id="number4" type="text">
    <input id="subtraction" type="button" value="計算">
  </div>

  <script src="js/caluculate.js" defer></script>
</body>
</html>

caluculate.css

.btn {
  background-color: orange;
  border-bottom: 2px solid darkorange;
  color: #fff;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  margin-right: 15px;
  padding: 5px 10px;
  opacity: 0.5;
}

.active {
  opacity: 1;
}

caluculate.js

var btns = document.getElementsByClassName('btn');
for (var i = btns.length - 1; i >= 0; i--) {
  btnAction(btns[i],i);
}

function btnAction(btnDOM, btnId) {
  btnDOM.addEventListener('click', function() {
    this.classList.toggle('active');

    for(var i = btns.length - 1; i >= 0; i--) {
      if(btnId !== i) {
        if(btns[i].classList.contains('active')) {
          btns[i].classList.remove('active');
        }
      }
    }
  });
}

document.getElementById('addtion').onclick = function () {
  var li = document.createElement('li');
  var number1 = parseFloat(document.getElementById('number1').value);
  var number2 = parseFloat(document.getElementById('number2').value);

  var result = document.getElementById('addtion').textContent = number1 + number2;
  var number = document.createTextNode(result);

  li.appendChild(number);

  var lists = document.getElementById('lists');
  lists.appendChild(li);
};

document.getElementById('subtraction').onclick = function () {
  var li = document.createElement('li');
  var number3 = parseFloat(document.getElementById('number3').value);
  var number4 = parseFloat(document.getElementById('number4').value);

  var result = document.getElementById('subtraction').textContent = number3 - number4;
  var number = document.createTextNode(result);

  li.appendChild(number);

  var lists = document.getElementById('lists');
  lists.appendChild(li);
}

##参考サイト
JavaScriptでクリックした要素を検出し、classを付与する方法（前編）

JavaScriptでクリックした要素を検出し、classを付与する方法（後編）

この２つのページのおかげで問題が解決し、切り替えボタンを作ることができました。

【jQuery】クリックで状態が切り替わるボタンを実装する【初心者向け】

【JavaScript】ボタンの文字の切り替え

現在の要素にアクティブクラスを追加する

displayを使った表示・非表示

MDN:JavaScript とは

##今後の構想
足し算がactive中のみ足し算が行える
引き算がactive中のみ引き算が行える機能を追加したい
（displayの切り替えをjsで書く必要がありそう）

active中のボタンを押してもactiveが消えないようにしたい

掛け算と割り算も実装したいので、後から追加しても問題ないように工夫する必要がある。

あとは、数字を入力しエンターキーを押したら隣のテキストボックスに移動するようにしたい

あとは細かいデザインの調整など