計算機を作る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);
}