計算機を作るpart2

きっかけ

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

ざっくりとした構想

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

完成物(スクリーンショット)

足し算ボタンがactive

引き算ボタンがactive

サンプルコード

caluculate.html

<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>jsを使って四則計算機</title><linkrel="stylesheet"href="css/caluculate.css"></head><body><ulid="lists"></ul><divid="caluculate_btns"><buttonclass="btn active">足し算</button><buttonclass="btn">引き算</button></div><divid="addtion_box"><inputid="number1"type="text"><span>+</span><inputid="number2"type="text"><inputid="addtion"type="button"value="計算"></div><divid="subtraction_box"><inputid="number3"type="text"><span>-</span><inputid="number4"type="text"><inputid="subtraction"type="button"value="計算"></div><script src="js/caluculate.js"defer></script></body></html>

caluculate.css

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

caluculate.js

varbtns=document.getElementsByClassName('btn');for(vari=btns.length-1;i>=0;i--){btnAction(btns[i],i);}functionbtnAction(btnDOM,btnId){btnDOM.addEventListener('click',function(){this.classList.toggle('active');for(vari=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(){varli=document.createElement('li');varnumber1=parseFloat(document.getElementById('number1').value);varnumber2=parseFloat(document.getElementById('number2').value);varresult=document.getElementById('addtion').textContent=number1+number2;varnumber=document.createTextNode(result);li.appendChild(number);varlists=document.getElementById('lists');lists.appendChild(li);};document.getElementById('subtraction').onclick=function(){varli=document.createElement('li');varnumber3=parseFloat(document.getElementById('number3').value);varnumber4=parseFloat(document.getElementById('number4').value);varresult=document.getElementById('subtraction').textContent=number3-number4;varnumber=document.createTextNode(result);li.appendChild(number);varlists=document.getElementById('lists');lists.appendChild(li);}